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 want to have an inline svg element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that.
index.html: <img src="foo.svg" style="width: 100%;" />
foo.svg: <svg width="123" height="456"></svg>
However, I want to add additional styles to the SVG thru CSS, so linking an external one is not an option. How do I make an inline SVG scale?
To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.
For instance, if you have the following:
<svg>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
It will render as a 10px by 20px triangle:
Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:
<svg width=100 height=50>
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:
<svg width=100 height=50 viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
If you want to scale it up to the width of the HTML viewport:
<svg width="100%" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):
<svg width="100%" height="50px" viewBox="0 0 20 10">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:
<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
<polygon fill=red stroke-width=0
points="0,10 20,10 10,0" />
</svg>
(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)
After like 48 hours of research, I ended up doing this to get proportional scaling:
NOTE: This sample is written with React. If you aren't using that, change the camel case stuff back to hyphens (ie: change backgroundColor to background-color and change the style Object back to a String).
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
Here's what is happening in the above sample code:
VIEWBOX
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
min-x, min-y, width and height
ie: viewbox="0 0 1000 1000"
Viewbox is an important attribute because it basically tells the SVG what size to draw and where. If you used CSS to make the SVG 1000x1000 px but your viewbox was 2000x2000, you would see the top-left quarter of your SVG.
The first two numbers, min-x and min-y, determine if the SVG should be offset inside the viewbox.
My SVG needs to shift up/down or left/right
Examine this: viewbox="50 50 450 450"
The first two numbers will shift your SVG left 50px and up 50px, and the second two numbers are the viewbox size: 450x450 px. If your SVG is 500x500 but it has some extra padding on it, you can manipulate those numbers to move it around inside the "viewbox".
Your goal at this point is to change one of those numbers and see what happens.
You can also completely omit the viewbox, but then your milage will vary depending on every other setting you have at the time. In my experience, you will encounter issues with preserving aspect ratio because the viewbox helps define the aspect ratio.
PRESERVE ASPECT RATIO
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Based on my research, there are lots of different aspect ratio settings, but the default one is called xMidYMid meet. I put it on mine to explicitly remind myself. xMidYMid meet makes it scale proportionately based on the midpoint X and Y. This means it stays centered in the viewbox.
WIDTH
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
Look at my example code above. Notice how I set only width, no height. I set it to 100% so it fills the container it is in. This is what is probably contributing the most to answering this Stack Overflow question.
You can change it to whatever pixel value you want, but I'd recommend using 100% like I did to blow it up to max size and then control it with CSS via the parent container. I recommend this because you will get "proper" control. You can use media queries and you can control the size without crazy JavaScript.
SCALING WITH CSS
Look at my example code above again. Notice how I have these properties:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
This is additional, but it shows you how to allow the user to resize the SVG while maintaining the proper aspect ratio. Because the SVG maintains its own aspect ratio, you only need to make width resizable on the parent container, and it will resize as desired.
We leave height alone and/or set it to auto, and we control the resizing with width. I picked width because it is often more meaningful due to responsive designs.
Here is an image of these settings being used:
If you read every solution in this question and are still confused or don't quite see what you need, check out this link here. I found it very helpful:
https://css-tricks.com/scale-svg/
It's a massive article, but it breaks down pretty much every possible way to manipulate an SVG, with or without CSS. I recommend reading it while casually drinking a coffee or your choice of select liquids.
You'll want to do a transform as such:
with JavaScript:
document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");
With CSS:
#yourtarget {
transform:scale(2.0);
-webkit-transform:scale(2.0);
}
Wrap your SVG Page in a Group tag as such and target it to manipulate the whole page:
<svg>
<g id="yourtarget">
your svg page
</g>
</svg>
Note: Scale 1.0 is 100%
Messing around & found this CSS seems to contain the SVG in Chrome browser up to the point where the container is larger than the image:
div.inserted-svg-logo svg { max-width:100%; }
Also seems to be working in FF + IE 11.
Here's an easy way:
Type 1: Most SVGs have a viewbox, like so:
<svg viewBox="0 0 24 30" ...>
And you can easily control their size in css:
svg {
height: 20px;
}
Type 2: If the svg has width and height, but doesn't have a viewport, like so:
<svg width="810" height="540">
Then you can just manually add a viewbox that's exactly the same as its width and hegith, like so:
<svg width="810" height="540" viewBox="0 0 810 540">
Then you can do the same as type 1.
Another simple way is
transform: scale(1.5);
changing the SVG file was not a fair solution for me so instead, I used relative CSS units.
vh, vw, % are very handy. I used a CSS like height: 2.4vh; to set a dynamic size to my SVG images.
If you want to scale SVG without preserveAspectRatio attribute.
This way SVG will always stretch to fill both width and height, and to do so, it will resize just width or height, if necessary, was looking for this for days, so thought to share it here in case someone else is looking for this
You have to remove width and height from <svg> and add viewBox attribute and add preserveAspectRatio="none"
example
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">
<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>
Adjusting the currentScale attribute works in IE ( I tested with IE 11), but not in Chrome.
I'm struggling with one of my SVGs where for now I'm just filling it with a solid grey rect. The rect fills fine vertically, but horizontally it's not filling the full space:
Here's a snippet from my html:
<div class="col-9 sh-input">
<svg viewBox="0 0 1000 100" width="100%" height="40px">
<rect x="0" y="0" width="1000" height="100" fill="#333"/>
</svg>
</div>
To get the rect to actually fill the entire view, currently I need to change x to ~-100 & width to ~1200.
I've been through all stylings to see if anything there could be the cause, but no luck, and I'm not doing any custom styling on svgs at the moment. Also, as a long shot, since the svg width is defined in percent & height in pixels, I wondered if that could be a factor, but changing the svg width="475px" is still producing the same result.
So I'm a little stumped at the moment, especially since I've used almost this exact code in other parts of my application without the same issues. If anyone can point out what dumb mistake I'm making I'll be eternally grateful!
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.
Inside a simple SVG element I have an image.
Chrome: Version 28. - works perfect
Firefox: 22.0 - no image is drawn
Opera: 12.16 - image is show 4 times larger than normal
Code:
<svg width="500px" height="500px" viewBox="0 0 70 70">
<image x="0" y="0" width="10" height="10"
id="knight" xlink:href="/images/knight.svg" />
</svg>
Your SVG is not being scaled to fit your 10x10 image rectangle because it has no viewBox. SVG renderers need to know the dimensions of the SVG content in order to know how to scale it. That is what the viewBox attribute is for.
Try adding the following to the root <svg> element in knight.svg.
viewBox="0 0 45 45"
Also, you need to define your namespaces for svg and xlink. Although perhaps you have just removed those for clarity(?).
Your knight is 45 x 45 pixels in size. The top left corner (10 x 10) pixels is blank.
You are asking for the image to be displayed for that top left corner in the <image> markup so Firefox correctly shows nothing because there's nothing there.
If you want to see the knight, make the <image> width and height 45 to match the underlying knight.svg dimensions.
Neither Chrome nor Opera seem to display the image correctly
An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’