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.
Looking at the following code snippet, I would expect the svg element referenced by "use" to be constrained within a 100px wide and 100px tall box:
body {
background: blue;
}
.svgautohide {
display: none;
}
<body>
<div style="height:100px;background:red">
<svg><use xlink:href="#icontest"></use></svg>
</div>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="svgautohide">
<defs>
<symbol id="icontest">
<rect x="0" y="0" width="100" height="100" />
</symbol>
</defs>
</svg>
</body>
However, this is not what I'm seeing, as the screenshot below illustrates:
This doesn't appear to be a browser bug, as the same behaviour was replicated across Firefox, Edge and Chrome. Can anyone help explain why the "use" box is a different size to the svg? Also, can anything be done to override this behaviour? Thanks.
You need to set a width and height for the referencing <svg>.
Both <svg> elements and <symbol>/<use>/ combinations provide a mechanism for fitting one area inside another:
For <svg>, the viewBox area is fitted inside the box defined by width and height.
For <use>, the viewBox area defined for the <symbol> is fitted inside the box defined by x, y, width and height of the <use>.
For both, if no viewBox is given, content remains at original size. A missing x or y defaults to 0. A missing width or height defaults to 100%. Percentages are defined in relation to the viewport, that is the size of the viewBox of the next outer <svg> (or the size of the svg itself, if it is missing).
In contrast, if the <svg> is the outermost in a HTML page, width and height are presentation attributes with a default value of auto. They are resolved within the CSS cascade and following its rules for inline-block elements. If finding a concrete size fails, the default object size comes out at 300px * 150px:
Otherwise, if height has a computed value of auto, but none of the conditions above are met, then the used value of height must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width.
Okay so my setup is a window object created on the fly.
I'm writing to it with window.document.write() and building out this:
<style>
#page{
size: landscape;
max-height: 100%;
max-width: 100%;}
svg{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
overflow: visible;
transform: scale(1, 1.3737);}
</style>
and then I clone the SVG from the page it's on and document.write(svgClone.innerHTML).
I end up with this: https://jsfiddle.net/je0ssLm2/1/
Please excuse the mess but that contains the entire code for the SVG and displays how it renders. The reason I'm scaling by 1.3737 on the Y axis is because the image is 1280 x 720 but 1280 x 989 is close to an aspect ratio of 1:3 which is approximately the AR of US letter.
Anyway, as you can see the display is not very attractive, and when it prints for some reason the margins are very large and the image is quite small and not quite centered in the screen. Is there some crucial CSS I am missing? This is driving me nuts, I've seen a few other answers about this and tried various but I just can't get it to print correctly.
I'm not as worried about size as I am positioning. I can monkey with the scaling to get the size right but if I make the image bigger then I'll cut off axis labels or the title because the graph doesn't center on the page. I also ALWAYS get an extra blank page, which isn't the end of the world but definitely isn't desirable.
You need to modify attributes on the <svg> element for a clean solution.
SVG has two attributes that let you describe scale-to-fit operations declaratively without computing transforms yourself: viewBox and preserveAspectRatio.
Instead of the attributes you have
<svg width="1280" height="720">
you can write
<svg viewBox="0 0 1280 720" preserveAspectRatio="none">
If you cannot get at the source text, you can simply wrap the <svg> in a second one:
<svg viewBox="0 0 1280 720" preserveAspectRatio="none">
<svg width="1280" height="720">...</svg>
</svg>,
and, as long as you define sensible sizes, should work in all media, including the page the SVG originally comes from.
The area defined by the viewBox in SVG userspace coordinates will then be fitted into the size of the <svg> element itself - since you have it defined in CSS with width:100%;height:100%;, it is fitted into the containing element.
preserveAspectRatio="none" does the uneven scaling for you. This didn't work before because as a default, the aspect ratio was preserved (and only after being scaled-down-to-fit, the CSS transform cut in).
So I began with a basic SVG circle, but I want it to be able to scale based on the viewport size.
<svg height="100" width="100"> <circle cx="10" cy="10" r="15" fill="black"></circle> </svg>
I know that with CSS I can take this sample div:
<div class="test_div"></div>
and use this CSS:
.test_div {height:5vh; width: 5vh;}
to effectively make test_div keep the same proportions as the viewport height changes. Is there a way to replace the SVG attribute values with some sort of scale-able size unit? i.e.
<circle cx="10vh" cy="10vh" r="5vh" fill="black"></circle>
I've never used StackOverflow before so help me out here if I was too vague -- thanks!
Instead of using pixel values, use percentage values for the circle size based on the ATSC HD standard 16:9 aspect ratio. Pixels for measurements are outdated.
So, i've been trying to make a portfolio page and i want to use custom shapes. So instead of use divs, i'm using a svg polygon shape to have the background img. Note, this is the first time i deal with svg and i'm trying to fix it the whole day.
So basically, the problem is, the border on the left-bottom and on the top-right is cutting out the edge of my shpe. I tried to reduce the the width/height of the polygon but it's not working properly. It stays to small or cut even more making it a swuare shape..
This is my html code and also a working jsfiddle: http://jsfiddle.net/1rmd2otz/1/
<div class="sv-img">
<svg class="svg" viewBox="0 0 910 500" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490">
<image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" />
</pattern>
</defs>
<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
</svg>
</div>
So, can anyone help me?
Okay I see a couple of things wrong. Let's start with the first and work through it.
For a start, your polygon is 900x490, but you are specifying a pattern with dimensions of 890x480. So that's part of the reason why you are getting "trimmed" corners - your pattern isn't extending the full width and height of the polygon.
If we fix that, we get almost there. I've added a red line to show the polygon outline more clearly.
Here's a demo.
It is still not quite right. There are still little gaps at the top and bottom. The reason for this is because the aspect ratio of your polygon/pattern (900/490 ~= 1.84) is not the same as the aspect ratio of your image (570/300 = 1.9). What the renderer is doing is scaling the 500x370 image up to fit inside the dimensions you specify for your <image>, whilst keeping the same aspect ratio. That results in an image that is 900 x 473.7 (473.7 = 900/1.9), centred vertically in your 900x490 pattern. That's leaving roughly 6 pixels at the top and bottom.
There are a few ways to fix that. Obviously one would be to change either the image or the polygon so their aspect ratios match exactly.
Another way to fix this is to change the way the image gets scaled. By default, the image gets scaled up to fit the width and height you specify, but doesn't go outside those dimensions. This means that sometimes a gap will be left - like we are seeing. You can change it to a different scaling mode which tells it to scale to fit the maximum dimension leaving no gaps. You do that by setting preserveAspectRatio="xMidYMid slice" on the image.
<image xlink:href="[...snip...]"
x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/>
Here's a demo of that.
You can see that the polygon is completely filled now.
You can read more about preserveAspectRatio here.
It looks like your issue is in the polygon points. Change ...
<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
To ...
<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>
jsFiddle: http://jsfiddle.net/rfornal/1rmd2otz/3/
This may not be EXACTLY what you want, but should get you moving in the right direction. You MIGHT be able to do this on the other side and change the SVG viewBox values (widen them).