I am trying to reduce the thickness of an arrow SVG image.I tried with stroke="grey" stroke-width="-10".When I change the value of stroke-width it's only increasing the thickness without reducing.
<svg fill="#808080" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" stroke="grey" stroke-width="-10"/>
<path d="M0-.25h24v24H0z" fill="none"/>
</svg>
The best way to demonstrate this is with a gif.
The shape has a mininum width, and increasing that width will result in a thicker shape.
But, as Paulie_D said:
The size of the image is not determined by the stroke...but rather the
path
The only way to actually decrease the width is to modify the path in a vector editor such as Inkscape. Clicking the second tool on the left (or pressing F2) will show boxes around the corners. The boxes can be dragged around to make the shape thinner.
Related
I am using Flaticon font library, which is really useful, since you can include svg images via the i tag and change their color and size via css.
Flaticon Font Documentation: https://www.flaticon.com/iconfonts
For some reason their svg icons are bigger than needed and have invisible space between them.
If I want to have a perfect design, I have to use margin with negative values, which is pretty annoying.
Is there something that I can do inline in order to make the size of the i element the same as the icon vector without the invisible space?
Update:
It seems like the spacing is intentional: https://gyazo.com/90f1b8f986bea7a00e8efeea52c24cdd
SVG icons normally have some whitespace around them. On of the reasons is because sometimes icons have to have different physical sizes in order to look optically similar in size.
Consider this square and a circle.
<svg viewBox="0 0 200 100" width="400">
<rect x="20" y="20" width="60" height="60" fill="grey"/>
<circle cx="150" cy="50" r="30" fill="grey"/>
</svg>
Note how they are the same phical size, but the circle does not have the same "physical presence" as the square.
But if we make the circle a little bigger, they now look better. They appear to match in size despite being physically different sizes.
<svg viewBox="0 0 200 100" width="400">
<rect x="20" y="20" width="60" height="60" fill="grey"/>
<circle cx="150" cy="50" r="35" fill="grey"/>
</svg>
How to adjust the padding
Most SVG icons have a viewBox attribute that tells the renderer what the important area of the SVG is. The renderer needs to know which area of the SVG canvas to scale up or down when you make an SVG bigger or smaller.
I don't know for sure that the Flaticon ones have a viewBox. But I'm going to assume that they do.
You can alter the padding in your icons by adjusting the viewBox dimensions. Contracting the viewBox in towards the icon shape will reduce the padding. But consequently it will make the icon appear bigger if you don't also reduce the display size of the SVG (ie the width and height of the SVG - or it's container).
Unfortunately you cannot alter the viewBox attribute via CSS. So you will have to edit the actual SVG file.
You can read more about the viewBox attribute in the SVG Specification. If that's hard to follow, you will be able to find other good viewBox tutorials. Here is a good one by Sara Soueidan.
Note: The reason I included the first section of this answer was to explain why the padding was there, and why it is useful. If you do alter your icons by reducing the viewBox, my recommendation would be to try and make the same change on all icons. Otherwise they may end up looking like they are all different sizes.
I have the following SVG in an HTML page.
<svg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox="0 0 1 1">
<circle class='spath' cx="0.5" cy="0.5" r="0.02" stroke="green" stroke-width="0.08" fill="none"/>
</svg>
The stroke-width is more than enough to cover the entire width of the circle. Instead of a solid circle though I get the following rendering:
Wherever the stroke overlaps itself from the other side it gets cancelled -- it draws nothing on the overlapping parts.
Is there some CSS/SVG setting to avoid this, or is it a Firefox rendering defect? (On Linux)
For reference, here is a stroke-width="0.05", which should not be filling less of the circle (like 0.08, it should completely fill it).
And this is 0.4, the size required to fill the circle. Since it lacks any overlap it appears to draw correctly.
Note: I'm unable to workaround the problem by calculating the exact size required. This is just a reduced example with a simple path. My full SVG has many curves and different points of overlap.
I have a svg path that I am trying to use as a clip mask. When I add the svg path to an svg element, its size lines up with the image I want to clip. However, If I copy and paste the same path into a clipPath element, it changes size. In the code below you can see that the same path is used to draw an svg and in a clipPath. The drawn path is the correct size, however the clipPath is larger.
<svg id="clip-svg" viewBox="0 0 374 518">
<path d="M374,0l-41.7,492.3c0,0-61.6,25.7-143.3,25.7S41.7,492.3,41.7,492.3L0,0C12,16.1,366.2,17.7,374,0z"/>
<defs>
<clipPath id="clip-path">
<path d="M374,0l-41.7,492.3c0,0-61.6,25.7-143.3,25.7S41.7,492.3,41.7,492.3L0,0C12,16.1,366.2,17.7,374,0z"/>
</clipPath>
</defs>
</svg>
Why is the path changing size when placed in the clipPath?
You don't say, but I assume you are clipping an HTML element?
When a clipPath is used outside of the SVG, it is not longer subject to the scaling that happens due to the viewBox. So it will be used, as defined, at 1:1 scale.
I've come across a strange behaviour (bug?) for rendering SVGs in Chrome. I want to use a SVG sprite in a background-image. This way I want to have access to multiple colors by just setting the background-position accordingly. While this seems to work Chrome is offsetting the SVG so it does not render at the correct position. It kinda looks like the background-position is not at (0, 0)...
Interesstingly Chrome is not always offsetting it... By changing the values of width/height of the div the SVG snaps back to the correct position for some widths/heights. Here is a pen I created to showcase the problem: https://codepen.io/thoro/pen/XpedPR
If you open the pen in Chrome, the arrow sprite will be offset and therefore the black arrow not fully visible. By changing the $box property to 66px the arrow will snap to the correct position just to be offset again when increasing the number...
In Firefox the arrow is rendering as expected. (IE is a whole other story but does not matter here)
My SVG I am trying to display:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 120">
<title>grid-link</title>
<symbol id="my" viewBox="0 0 10 120">
<path d="M6.1 7.7l.6.6L10 5 6.7 1.7l-.6.6 2.3 2.3H0v.8h8.4L6.1 7.7z"/>
</symbol>
<use xlink:href="#my" y="0" fill="#000"/>
<use xlink:href="#my" y="110" fill="#fff"/>
</svg>
Am I doing something wrong? Is there any way to fix this?
The problem can be fixed by removing the viewBox and using width and height instead:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="10" height="110">
<title>grid-link</title>
<symbol id="my">
<path d="M6.1 7.7l.6.6L10 5 6.7 1.7l-.6.6 2.3 2.3H0v.8h8.4L6.1 7.7z"/>
</symbol>
<use xlink:href="#my" y="0" fill="#000"/>
<use xlink:href="#my" y="110" fill="#fff"/>
</svg>
Your problem is with ViewBox. You specify a ViewPort (via the div's width and height) of 65 by 65, but set the ViewBox height as 120.
If you remove ViewBox completely from your SVG it fixes the problem you describe (and makes the resulting icon scalable as you change $box).
Sara Soueidan has a very useful write-up of ViewPort, ViewBox and the SVG coordinate system on her blog: https://sarasoueidan.com/blog/svg-coordinate-systems/.
I've been toying with using clipping masks on images for certain responsive layouts, but I'm getting a bit twisted up on the logic of the viewBox, preserveAspectRatio and the svg coordinate system.
Take for example:
<svg class="clipper" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none">
<g>
<clipPath id="mask">
<polygon points="0,0 50,0 40,50 0,50 0,0" />
</clipPath>
</g>
<g clip-path="url(#mask)">
<image preserveAspectRatio="xMidYMid slice" height="50%" width="50%" xlink:href="http://lorempixel.com/1400/800" />
</g>
</svg>
This plots a polygonal clipping mask, a skewed quadrangle that reaches out to the halfway point of the svg element and halfway down the element. The image is inside a group, which is cropped by the mask.
I've put preserveAspectRatio="none" on the svg element, to make sure the clipping mask appears where I desire, but this causes the image to stretch.
The preserveAspectRatio logic on the svg element, appears to supersede the attribute applied to the image element, where I try to preserve and slice the aspect ratio.
If, instead, I put the "xMinYMid slice" value on the svg element instead, the image maintains its scale, but the clipping mask polygon no longer is positioned at the desired location as it is also scaling, in a manner I can't quite determine its logic.
Is there a way to preserve the co-ordinate system in the first example, but keep images from stretching? I have laid both variants side by side for a comparison on codepen here.