Is there any way to decrease svg path thickness? I have following icon in svg format but this icon is made by single path. Adjusting atrributes "fill" or "stroke-width" not working.
What I am trying to do is reduce thickness of visible border by half.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
Is there any online editor which can do that? Or maybe there is some css tricks that I don't know?
Path thickness is negligible. Your path is not defining the lines you see, it is defining the border of those lines explicitly. You can see what the path describes by adding stroke="red". You can't decrease the thickness of the filled-in polygons by fiddling with the attributes alone. The only thing you can do without completely redoing the path is to use the background-colour stroke to erase part of the filled-in portion, though I'd argue it can't look as good as a hand-crafted icon:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path stroke-width="1" stroke="white" d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon stroke-width="1" stroke="white" points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
Related
I am trying to create a diamond using <svg> and <polygon> HTML5 elements. I specified the points, but it is not being filled as a diamond; instead it is being filled as a pair of triangles. Here's my approach:
<div>
<svg width="2000" height="2000">
<polygon points="25 25, 75 25, 50 50, 50 0" style=" fill: blue; stroke:black;"/>
</svg>
</div>
I hope you enjoy
<svg width="2000" height="2000">
<polygon points="0 40,40 80,80 40,40 0" style=" fill: blue; stroke:black;"/>
</svg>
As mr dqhendricks said in the comments above it would be better if you use the icons in the bootstrap icons library
or you can change your code to
<polygon fill="none" stroke-width="3" points="69.445,125 125,28.774 180.556,125
125,221.227 " style=" fill: blue; stroke:black;"/>
And it will give you a diamond shape
I'm using this custom size 64*64 plus icon svg as zoom icon as a cursor in my website. As you can see, it's pixcelated. Specially the white border. Don't know why. Because it's svg it suppose to looks sharp right?
I tried everything.
Increasing border width.
Increasing size.
Set shape-rendering="auto"
None of above working.
Here is my svg code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="64px" height="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-285 377 40 40" style="enable-background:new -285 377 40 40;" xml:space="preserve" shape-rendering="auto">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.8;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;enable-background:new ;}
</style>
<title>zoom_icon</title>
<g>
<title>background</title>
<rect id="canvas_background" x="-286" y="376" class="st0" width="12.6" height="12.6"/>
</g>
<g>
<title>Layer 1</title>
<g id="Layer_2_1_">
<g id="Layer_1-2">
<circle id="svg_1" shape-rendering="geometricPrecision" class="st1" cx="-264.8" cy="397.2" r="18"/>
<line id="svg_2" class="st1" x1="-264.8" y1="386.7" x2="-264.8" y2="407.7"/>
<line id="svg_3" class="st1" x1="-254.3" y1="397.2" x2="-275.3" y2="397.2"/>
</g>
</g>
</g>
</svg>
Here is my the svg file: https://svgshare.com/i/H_C.svg
Here is the real world example. Jsfiddle
What course to pixcelated this image?
you can try removing the circle and just use a border:
.plus {
border: solid white 1px;
border-radius: 50%;
}
I currently have two SVGs that were designed to interlock with eachother but the higher SVG (The first in the imgur link) acts as if it were a rectangle and "pushes" the lower SVG (The second picture in the imgur link) down away from it and they end up with a large space between them (The third imgur link). I have only changed the width of the second SVG in the code so far. Without manually aligning them, which would ruin my page's responsiveness, is there a way to give the SVG a smaller hitbox or similar?
https://imgur.com/a/YtBuso4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1250">
<defs>
<style>
.cls-1 {
fill: #190eae;
}
</style>
</defs>
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<defs>
<style>
.cls-1 {
opacity: 0.7;
}
</style>
</defs>
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-1" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Thank you
I think the most simple solution to your problem is to lessen the viewBox height of the first <svg>, but to show the overflow. That way, the triangular form at the bottom will "slip" under the second <svg>
svg {
overflow:visible;
display:block;
}
.cls-1 {
fill: #190eae;
}
.cls-2 {
opacity: 0.7;
}
<svg id="svg-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg id="svg-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-2" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Note how I have moved the styles outside the SVGs. They are part of the same DOM anyway, and if both quote the same class name, both styles will be applied to both paths. I've changed the class name for one of them, so that does not happen.
Another issue is that <svg> elements in HTML are inline-blocks. As such they have a line height, and if they are displayed one below the other (as happens here because their default width is 100%), that may lead to a small visible gap between their layout boxes. Setting display:block solves that.
I have such SVG as below. Right now the circle takes the whole size of SVG. How can I make it look like this: the SVG has a certain size (let's say 215x250) and the circle should be of size 16 in the center of svg. Would be also great to animate this centered circle so it looks like a loading spinner.
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<style type="text/css">
.st0{fill:#292929;}
.st1{fill:#D5D5D5;}
</style>
<path class="st0" d="M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54
C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z"/>
<path class="st1" d="M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z"/>
</svg>
JSFiddle
This is what I am trying to achieve:
Well the obvious answer (other than loading it back into Illustrator and resizing it :) is to scale the two paths down and move them to the centre.
The scale would need to be 16/300 = 0.053. And to move something that is 16x16 to the centre of a 300x300 viewBox, you would need to move it to (142,142).
If you want the SVG to be 215x250, then style it with that width and height.
Finally, for the rotation, you can just use an <animateTransform> element.
svg {
width: 215px;
height: 250px;
border: blue 1px solid;
}
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 300 300">
<style type="text/css">
.st0{fill:#292929;}
.st1{fill:#D5D5D5;}
</style>
<g transform="translate(142,142) scale(0.053)">
<path class="st0" d="M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54
C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z"/>
<path class="st1" d="M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z"/>
<animateTransform attributeName="transform" type="rotate"
from="0 150 150" to="360 150 150"
dur="1s" repeatDur="indefinite" additive="sum"/>
</g>
</svg>
I'm trying to animate some vector graphics. Therefore I need to use svg inline or use something like https://github.com/jonathantneal/svg4everybody for external embedding in IE. So my HTML looks like this currently:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="chart" viewBox="0 0 1042 1024"><!-- SVG CODE --></symbol>
</svg>
<svg role="img" class="icon" width="200" height="200">
<use xlink:href="#chart"></use>
</svg>
http://codepen.io/anon/pen/LEWjvX
But as you might see the SVG is pretty small, although I used width both in the HTML and CSS (not sure if I need both?). It just doesn't scale. According to many articles I read about this problem (like this one http://css-tricks.com/svg-symbol-good-choice-icons/ or http://css-tricks.com/scale-svg/) it should work that way. What am I doing wrong?
FYI: I used icomoon to create the SVG sprite and Illustrator to create the SVGs. To animate the SVG I gave most of the paths a class name, if that makes any difference.
I'm not sure I understand clearly what's the problem you're asking for help so I'll try to answer a maximum I saw in your snippet.
If you can't see the chart, I think it's more because of the default fill color being black, than because of the size. If you add fill: #FFF into your #wrapper's css or in an appropriate svg{} statement, you'll see it clearly.
If your compass is so small, I think it's because your drawn pathes only are 50px large in a 1024x1024 document. (You're setting a viewBox="0 0 1024 1024" to your <symbol> element but setting it to something like 0 0 50 50 will help if you want to use transformations later, or even better, redraw it in a document where they fit right).
You say that you want to animate those graphics. There are actually a lot of ways to do so. You can look to CSS animations (via a style sheet) or SMIL (directly in the inline svg) or via javascript (by modifying directly the attributes as noticed in Nicholas Kyriakides answer). Look at the examples in the snippet below.
var scale = 1;
window.onload = function(){
document.getElementById('p').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale+=.1)+')');}, false);
document.getElementById('m').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale-=.1)+')');}, false);
};
.icon {
width: 400px;
height: 200px;
}
.wrapper {
background: black;
width: 80%;
max-width: 400px;
margin: 0 auto;
color:#fff;
fill: #fff;
}
text {
cursor: pointer;
}
.icon:hover{
cursor: pointer;
}
.icon:hover .chart{
fill: #FAF;
-webkit-animation: color 5s;
animation: color 5s forwards alternate;
}
#-webkit-keyframes color{
0%{ fill : #FFF;}
10%{ fill : #508694;}
50%{fill: #FBB03B;}
90%{ fill : #D19B6F;}
100%{ fill : #FFF;}
}
#keyframes color{
0%{ fill : #FFF;}
10%{ fill : #508694;}
50%{fill: #FBB03B;}
90%{ fill : #D19B6F;}
100%{ fill : #FFF;}
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="chart" viewBox="0 0 1042 1024">
<path class="chart" d="M893.78 455.769h145.017v568.231h-145.017v-568.231z" />
<path class="chart" d="M671.815 0h145.017v1024h-145.017v-1024z" />
<path class="chart bar3" d="M446.89 624.462h145.017v396.578h-145.017v-396.578z" />
<path class="chart" d="M224.925 227.884h145.017v796.116h-145.017v-796.116z" />
<path class="chart" d="M0 71.029h145.017v952.971h-145.017v-952.971z" />
</symbol>
<symbol id="compass" viewBox="0 0 46.6 46.6">
<path class="compas__outer" fill="#FFFFFF" d="M22.7,0C10.2,0,0,10.2,0,22.7c0,12.5,10.2,22.7,22.7,22.7 c12.5,0,22.7-10.2,22.7-22.7C45.4,10.2,35.3,0,22.7,0L22.7,0z M22.7,42.9c-11.1,0-20.1-9-20.1-20.1c0-11.1,9-20.1,20.1-20.1 c11.1,0,20.1,9,20.1,20.1C42.9,33.8,33.8,42.9,22.7,42.9L22.7,42.9z M22.7,42.9"/>
<path class="compass__needle" fill="#FFFFFF" d="M24.7,20.7C24,20,23,19.7,22,19.9l1.5-1.5l-12-6.9l6.9,12l1.5-1.5 c-0.2,0.9,0,2,0.8,2.7c0.7,0.7,1.8,1,2.7,0.8L21.9,27l12,6.9l-6.9-12l-1.5,1.5C25.7,22.5,25.5,21.4,24.7,20.7L24.7,20.7z M21.8,23.6c-0.5-0.5-0.5-1.3,0-1.8c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.3,0,1.8C23.1,24.1,22.3,24.1,21.8,23.6L21.8,23.6z M31.9,31.9l-8.7-5.1l3.7-3.7L31.9,31.9z M31.9,31.9">
<animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 22.7 22.7" to="360 22.7 22.7" repeatCount="indefinite" />
</path>
</symbol>
<symbol id="linked-in" viewBox="0 0 1070 1024">
<path d="M241.778 1024v-689.778h-227.556v689.778h227.556zM128 238.222c78.222 0 128-53.333 128-120.889s-46.222-117.333-128-117.333c-78.222 0-128 49.778-128 120.889 0 64 49.778 117.333 128 117.333v0 0zM369.778 1024c0 0 3.556-625.778 0-689.778h227.556v99.556c28.444-46.222 85.333-117.333 209.778-117.333 149.333 0 263.111 99.556 263.111 309.333v394.667h-227.556v-366.222c0-92.444-32-156.444-117.333-156.444-64 0-99.556 42.667-117.333 85.333-7.111 14.222-7.111 35.556-7.111 56.889v384h-231.111z" fill="#FFF"/>
</symbol>
</svg>
<div class="wrapper">
<h1>CSS #keyframe</h1>
<svg role="img" class="icon" width="400" height="200">
<!-- I had to get it out of the <use> because webkit browsers ##ø‡~! http://codepen.io/AmeliaBR/pen/lshrp-->
<g id="chart">
<path class="chart" d="M172.1,90.6H200V200h-27.9V90.6L172.1,90.6z"/>
<path class="chart" d="M129.3,2.8h27.9V200h-27.9L129.3,2.8L129.3,2.8z"/>
<path class="chart" d="M86,123.1H114v76.4H86V123.1L86,123.1z"/>
<path class="chart" d="M43.3,46.7h27.9V200H43.3L43.3,46.7L43.3,46.7z"/>
<path class="chart" d="M0,16.5h27.9V200H0C0,200,0,16.5,0,16.5z"/>
</g>
<use xlink:href="#chart" id="charts" x="100"></use>
</svg>
<h1>SMIL animateTransfrom</h1>
<svg viewBox="0 0 1024 1024" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 80%; height: 70px; overflow: visible">
<use xlink:href="#compass"></use>
</svg>
<h1>Javascript</h1>
<svg viewBox="0 0 1024 1024">
<use xlink:href="#linked-in" id="linked"></use>
<text id="p" font-size="200" y="140" x="650">+</text>
<text id="m" font-size="200" y="140" fill="" x="800">-</text>
</svg>
</div>
Try this; change the viewBox of the symbol to be closer to size it was designed in. I did a quick look for the outer dimensions of the paths, then assumed 100x100.
<symbol id="compass" viewBox="0 0 100 100">
CodePen: http://codepen.io/rfornal-ssi/pen/GgWMvZ
I only adjusted one part, assuming that you can more forward with the rest of the code from this point.
UPDATE:
Based on testing by the OP, we learned that add viewBox to the <svg> tag itself is not needed since <symbol> tags are used.