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.
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.
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.
Good Evening,
I have multiple SVG files and need to dynamically change their fill color. Preferably using CSS.
HTML:
<div>
<svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin meet">
<image xlink:href="http://imgh.us/export_1.svg" width="64" height="64" />
</svg>
</div>
CSS:
div {
width: 64px;
height: 64px;
}
svg, svg * {
fill: #000000 !important;
}
SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, 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="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="72.121px" height="59.209px" viewBox="0 0 72.121 59.209" enable-background="new 0 0 72.121 59.209" xml:space="preserve">
<g>
<path fill="#ff0000" d="M71.53,36.664L57.56,22.705c-0.57-0.57-1.43-0.74-2.18-0.43c-0.74,0.31-1.23,1.04-1.23,1.84v5.59h-4.32
v-12.6c0-0.53-0.22-1.05-0.609-1.43L33.6,0.564c-0.22-0.21-0.47-0.36-0.75-0.45c-0.1-0.04-0.2-0.06-0.31-0.08
c-0.06-0.01-0.12-0.02-0.18-0.02h-0.08c-0.06-0.01-0.13-0.01-0.19-0.01H2c-1.1,0-2,0.89-2,2v55.2c0,1.11,0.9,2,2,2h45.83
c1.101,0,2-0.89,2-2v-10.75h4.32v5.591c0,0.81,0.49,1.54,1.23,1.85c0.25,0.1,0.51,0.15,0.77,0.15c0.521,0,1.03-0.2,1.41-0.58
l13.97-13.971c0.38-0.38,0.59-0.88,0.59-1.409C72.12,37.545,71.91,37.045,71.53,36.664z M45.83,55.204H4v-51.2h26.21v13.1
c0,1.11,0.89,2,2,2h13.62v10.6H34.91c-1.1,0-2,0.9-2,2v12.75c0,1.11,0.9,2,2,2H45.83V55.204z"/>
<path fill="#ff0000" d="M32.28,0.015c-0.06-0.01-0.13-0.01-0.19-0.01h0.12C32.23,0.004,32.26,0.015,32.28,0.015z"/>
</g>
<g>
<path fill="#ff0000" d="M32.21,0.004h-0.12c0.06,0,0.13,0,0.19,0.01C32.26,0.015,32.23,0.004,32.21,0.004z"/>
</g>
</svg>
Here's a fiddle.
My problem is simple. Instead of the fill color in the CSS, the SVG-files fill color is used. Which makes sense, since it's a different document.
For various reasons I can not edit the SVG files.
Is there a solution and what would it look like?
If you want to use the SVG and Image tag alone you'll need to use javascript to manipulate/recreate the image to use the filters/colors/css:
How to change color of SVG image using CSS (jQuery SVG image replacement)?
If you want to use pure CSS you need to embed the SVG directly in the page.
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.