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.
So I have a navbar that uses svg icons. I tried to replace an icon but I can't seem to find the right size/shape.
This is the svg code from the icon that works:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="62px"
viewBox="0 0 32 62" enable-background="new 0 0 32 62" xml:space="preserve">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
This is how the navbar looks, if it helps:
I'm not sure about the size, maybe that's why I get it wrong, however, I tried with 32x32p and 64x64p. Thanks, any answer is welcome
Here is a .css snippet of my navbar icons: https://pastebin.com/7TqJU6yc. Here is my .js code for the animation, if it has anything to do with it: pastebin.com/jCcvEuA4 and lastly a little bit of HTML, however it doesn't really involve the icons much: pastebin.com/RydBqfHB. A little bit of backstory: The icon is set as a <li> background. That's why I thought the size myght be the issue here, or the icon itself, however it doesn't seem the case.
Also, here is a little screenshot with a replaced icon, to help understand the problem: imgur.com/a/LW7sdIZ (notice the home icon)
For clarity, the regulation of the location of the icon relative to the SVG canvas, you can apply the style
style="border:1px solid red;"
The red frame around the icons is the canvas svg
To make the icons visible, I added fill="black"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="62px"
viewBox="0 0 32 62" style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
If you want to show only one icon, you must specify width="32" height="32" viewBox="0 0 32 32"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32" style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
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 …
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'm having an issue with 3 SVG icons, and i don't know exactly why, because the same css is being apply in other icons, but they are working 100%.
The following problem is happening in IE9:
Chrome:
http://i.stack.imgur.com/gYfsb.png
IE9:
http://i.stack.imgur.com/q2220.png
In my search i found that i need add this metadata in the SVG tag:
xmlns="http://www.w3.org/2000/svg" version="1.1"
But didn't work.
The other icons is from fontastic
The codes:
1:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
<path d="M340.377,292.154H227.178v-124.4h36v88.4h77.199V292.154z M389.404,378.858 c29.393-32.142,47.327-74.937,47.327-121.924c0-99.814-80.915-180.73-180.731-180.73c-99.815,0-180.73,80.916-180.73,180.73 c0,46.986,17.935,89.781,47.326,121.924c-9.047,22.51-20.913,52.037-28.938,72.002c-1.211,3.014-0.317,6.465,2.204,8.513 s6.086,2.219,8.786,0.413c18.391-12.305,45.747-30.606,65.463-43.797c25.548,13.824,54.801,21.677,85.889,21.677 s60.342-7.853,85.89-21.677l65.463,43.797c2.701,1.807,6.264,1.643,8.786-0.404c2.523-2.047,3.418-5.499,2.206-8.515 L389.404,378.858z M256,392.666c-75.013,0-135.73-60.707-135.73-135.731c0-75.013,60.706-135.73,135.73-135.73c75.013,0,135.731,60.704,135.731,135.73C391.731,331.945,331.026,392.666,256,392.666z M174.875,62.454c-12.251-7.292-26.556-11.491-41.848-11.491c-45.287,0-82,36.713-82,82c0,15.057,4.068,29.158,11.153,41.284C83.734,123.916,124.338,83.614,174.875,62.454z M449.82,174.246c7.085-12.126,11.152-26.227,11.152-41.283c0-45.287-36.713-82-82-82c-15.292,0-29.597,4.199-41.847,11.491C387.662,83.613,428.266,123.916,449.82,174.246z"></path>
</svg>
2:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" width="20px">
<path d="M407.448,360.474c-59.036-13.617-113.989-25.541-87.375-75.717c81.01-152.729,21.473-234.406-64.072-234.406c-87.231,0-145.303,84.812-64.072,234.406c27.412,50.482-29.608,62.393-87.375,75.717c-59.012,13.609-54.473,44.723-54.473,101.176h411.838C461.919,405.196,466.458,374.083,407.448,360.474z"></path>
</svg>
3:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20px" viewBox="0 0 512 512">
<path d="M407.447,380.817c-50.919-11.622-112.919-41.622-94.652-80.682c11.732,19.236,48.084,30.361,76.4,13.736c-81.506-20.57,40.066-161.795-66.458-240.959c-38.877-29.041-95.209-29.373-133.474,0c-106.524,79.164,15.048,220.389-66.458,240.959c28.316,16.625,64.723,5,76.4-13.736c18.268,39.064-43.786,69.072-94.652,80.682c-59.041,13.475-54.473,52.025-54.473,80.176h411.838C461.919,432.843,466.489,394.294,407.447,380.817z"></path>
</svg>
I don't believe this is a problem with the CSS, because the other icons is with the same style.
Have you tried setting a height or at least a max-height? It's hard to say without seeing the code for the page, but it looks like the SVG element is taller than it needs to be (with the image itself scaling down into the center based on the width you've applied).