I want to use a svg inside image tag as below
<img src="test.svg" style="width: 24px; height: 24px;">
and my "test.svg" is:
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width="24px" height="24px" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
My problem is that the svg doesn't scale and fit to the image tag and get cropped. It seems setting viewport for svg doesn't work. What should I do?
The problem is that the actual size of your path inside the SVG file is not 24x24 pixels, but 28x20, and is positioned at X=2 and Y=6. (You can use an SVG editor program like Gravit to look these numbers up.) Using that knowledge, setting you viewport to viewBox="2 6 28 20" does fix your problem.
Related
How can you select the color "fill" for a svg image using css? I have the following img tag:
<img src="assets/images/folder.svg" class="svg" >
My .svg file is locking like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 25 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-87.34,-350.89)">
<g transform="matrix(1,0,0,0.947605,-375.66,-124.574)">
<g id="Mail-Icon" serif:id="Mail Icon" transform="matrix(1,0,0,1.05529,-47.0001,-2366.53)">
<path d="M532.5,2737L511.5,2737C510.672,2737 510,2736.33 510,2735.5L510,2719.5C510,2718.67 510.672,2718 511.5,2718L518.065,2718L518.065,2720L532.5,2720C533.329,2720 534,2720.67 534,2721.5L534,2735.5C534,2736.33 533.329,2737 532.5,2737ZM531,2724L531,2722.43L513,2722.44L513,2724L531,2724Z" style="fill:rgb(131,147,167);"/>
</g>
</g>
</g>
</svg>
I have tried this, but it does not work:
.svg {
fill:rgb(18, 136, 222);
}
I have seen solutions where you add the svg code inside your HTML. Though I am looking for a solution where adding the svg inline is not required.
The problem with both <img> and background-image, Is that you don't get to control the innards of the SVG with CSS like you can with using SVG as inline or Using SVG as an <object>.
svg path {
fill: red;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><title>Untitled-1</title><g id="Mail-Icon"><path d="M552,467.87H48a36,36,0,0,1-36-36v-384a36,36,0,0,1,36-36H205.56v48H552a36,36,0,0,1,36,36v336A36,36,0,0,1,552,467.87Zm-36-312V118.19l-432,.24v37.44Z"/></g></svg>
You can read more about it here
Similar question answered here: img src SVG changing the fill color
As you cannot modify an external ressource with a CSS file, and that using the <img> tag imports an external ressource, you cannot achieve what you want without putting the .svg content into you .html page.
Another option is to modify directly the svg code by adding the fill="rgb(18, 136, 222);" as an attribute of the <path> tag :
<path fill="red" d="M532.5 …
How can I control the position and space around my .svg. Right now when the page renders I get all this space around to the right and bottom of the .svg?
My markup and styling looks like such:
<style>
.fill-extra { fill: #686868; }
</style>
In the <body> I have:
<svg class="fill-extra" width="150" height="150" viewBox="0 0 100 100">
<use xlink:href="svg_icons/extra_closed.svg#Layer_1"></use>
</svg>
the svg looks like this
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
enable-background="new 0 0 49.68 49.68" xml:space="preserve">
<path d="M48.998,24.754c0,13.408-10.87,24.279-24.279,24.279c-13.41,0-24.279-10.871-24.279-24.279
c0-13.409,10.87-24.279,24.279-24.279C38.128,0.475,48.998,11.345,48.998,24.754z M24.715,38.347h13.527l4.445-17.837l-1.871-3.976
h-1.641l-0.467,2.572H24.715h-13.99l-0.466-2.572H8.62l-1.871,3.976l4.445,17.837H24.715z M24.717,28.697h4.93l1.666-1.053V23.96
h-1.754v2.456h-4.842H19.88V23.96h-1.755v3.685l1.667,1.053H24.717z M24.717,17.074h12.209v-3.07H24.717H12.51v3.07H24.717z
M24.717,11.942h7.999V9.837h-7.999h-7.996v2.105H24.717z"/>
</svg>
Your viewBox is from 0,0 to 100,100 but the path's bounds are roughly 0,0 to 50,50.
You could make the viewBox smaller e.g. viewBox="0 0 50 50" which would keep the drawing the same size but make the contents look bigger. Or you could also make the width and height smaller which in conjunction with adjusting the viewBox dimensions could keep the drawing the same size whilst also getting rid of the empty space round it.
I have a simple SVG that i would like to stretch to fill its container without preserving aspect ratio. No matter what I seem to do the SVG seems to be preserving the aspect ratio, which I believe I have turned off in the SVG file. It just never wants to stretch to the full width of the container. What exactly is going wrong here? Thank you!
SVG:
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
preserveAspectRatio="none" >
<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>
CSS:
.issue-name {
background-image:url(../img/IS-arrow.svg);
padding-left:1rem !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
HTML:
<div class="large-11 small-10 columns text-center issue-name">
<h5 class="vertical-center">PLC Adjustments for Young Producers</h5>
</div>
Result:
Imgur link
preserveAspectRatio does nothing if your SVG doesn't have a viewBox.
It is viewBox which tells the renderer how big the contents of your SVG are, so it knows how much to scale by.
You have to remove width and height from svg and add viewBox
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"
preserveAspectRatio="none" >
<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>
I am using svg image as background and I am stretching SVG image through background-size. I want it to be strech only width wise. Its working perfectly fine in firefox, IE9 + but chrome. Please suggest me how i can achieve it.
.homecallouts ul li {
background-image: url('blue_arow_callout.svg');
background-size: 100% 100%;
width: 21%;
height: 42px;
see the jsbin code
http://jsbin.com/uvijuc/4/
when i resize in firefox only width stretch but in chrome both width and height are stretching. I want only width to stretch.
Maybe adding preserveAspectRatio="none" to open tag in the SVG file could help?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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"
width="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974"
xml:space="preserve" preserveAspectRatio="none">
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/>
</svg>
JSBin example
I do not have enough reputation to upvote or comment, so only answering it again will work. I solved a similar case by just adding preserveAspectRatio="none".
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="591.42859"
height="250.24918"
id="svg2"
version="1.1"
preserveAspectRatio="none"
inkscape:version="0.48.2 r9819"
sodipodi:docname="background.svg">
Don't use background-size. What you need to do is have the following values for width, height and preserveAspectRatio in your SVG file.
<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." />
Note that in order for this to work, your SVG needs to have a valid viewBox as well. Which it does appear to do.
It's a Chrome bug. Regression, in fact.
http://code.google.com/p/chromium/issues/detail?id=113414
I think technically chrome is correct on this one, you need to adjust your background-size values to what you actually want. Keeping them at 100% is forcing the aspect ratio to remain constant.
How can I display an SVG image within an object tag at a different scale than its original scale?
For example, if I have an SVG file saved as example.svg:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
and I want to display this in page.html at a different scale:
<!DOCTYPE html>
<html>
<head></head>
<body>
<object type="image/svg+xml" data="/example.svg" width="50" height="50">
</object>
</body>
</html>
It ought to display a version of the svg scaled down to 50x50, but instead it keeps the scale the same and gives the image scrollbars.
However, if I do an inline SVG like the following, it works:
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="50"
height="50"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
</body>
</html>
I have tried various combinations of this, such as adding width="100" and height="100" into the .svg file, using preserveAspectRatio="xMidYMid meet", adding 'px' to the width and height values, using width and height = "100%" in the svg, and other things, but none of them have worked.
In my situation I can just include the svg inline, but I don't feel like it should be that hard to change the scale of the image. Plus I want the browser to be able to cache the image.
SVG is case sensitive. If you change viewbox to the correct case of viewBox in example.svg then this displays as you want it to (at least it does on Firefox and Opera I didn't try other UAs).
You need to set the width and height attributes of your svg element to 100%. It will then be scaled to the size of the container (the object element). Without that, it will just be displayed at the exact size specified (100 pixels).
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100"
width="100%" height="100%">
<circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
What works for me is the following: I define the "basic" size of the svg with a viewbox and also add the attributes "height=100% width=100%". This means, that the svg will take 100% of the width and height of its parent element. If I put the SVG in an <object> tag, I simply define the size of the object per css and voila, the SVG automagically adapts its size. In the example, I scale an SVG where the viewbox defines a size 100x100px to 300x300px.
file.svg
<svg viewBox="0 0 100 100" width="100%" height="100%">
<path .... />
</svg>
HTML:
<object type="image/svg+xml" data="your/path/to/file.svg" class="icon"></object>
CSS:
object.icon{
height:auto;
width: 300px;
}