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.
Related
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.
I'm trying to get an image clipped by a external svg file.
I can get it to work applying eg. a polygon directly to the css, but when I try to link it to an external svg, it's not working.
This is my image that needs to be clipped:
<img src="{{ asset('/images/hero.jpg') }}" class="hero-image">
This is my svg
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1366 706" style="enable-background:new 0 0 1366 706;" xml:space="preserve">
<defs>
<clipPath id="bg-clipping">
<path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
</clipPath>
</defs>
</svg>
and here is my css
.hero-image {
#apply absolute w-full h-full;
clip-path: url("#bg-clipping");
}
Please save me, heroes of Stackoverflow. I've been struggling for a loooooong time now.
If the SVG is on a different URL, you're probably out of luck. Firefox is currently the only browser that supports this (CanIUse chart footnote 2).
If you're OK with it only working in Firefox, you can define the clip-path like so.
.hero-image {
clip-path: url("path/to/svg.svg#bg-clipping");
}
Interesting caveat: while it does work with relative URL's (as demonstrated here), it doesn't work with absolute URL's to a different domain (demo here). I can't find an explanation for this in the spec, it appears to be a bug.
When the SVG is on the same page as the image, it should work fine. Browser support is better.
body {
margin: 0;
}
.hero-image {
min-height: 706px;
clip-path: url("#bg-clipping");
}
<img src="https://picsum.photos/id/1015/1366/706" class="hero-image">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1366 706">
<defs>
<clipPath id="bg-clipping">
<path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
</clipPath>
</defs>
</svg>
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 generate an SVG image using Adobe Illustrator CS6. This image is located at my site media folder (root/sitemedia/images/). I put as a background of a jumbotron but it doesn't display anything, just a blank image. When I openned in the browser (Safari, FF, Chrome) it displays the image that I want.
The css code I'm using is
.jumbotron{
background: url(../images/jumbo-bg.svg) center no-repeat #FFF;
background-size: cover;
}
The code generated by Illustrator is
<?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="central" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="640px" height="480px" viewBox="0 0 640 480" enable-background="new 0 0 640 480" xml:space="preserve">
<image overflow="visible" width="640" height="480" id="image1" xlink:href="folder/image1.png" transform="matrix(1.0002 0 0 1.0002 0 0)">
</image>
</svg>
I already changed the xlink:href of the image for the root folder but it doesn't work. What's happen with this image?
If you display an SVG file as a background-image (or any other image type such as an html <img> or SVG <image>) it must be complete within a single file to prevent privacy leaks.
Encode your png as a data URI within the SVG document and it should work.
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>