Trying to fill a SVG with CSS, but not working - html
I'm trying to fill a twitter icon SVG with it's color through CSS. I did this before, I did this in some other places but, for some reason, it stopped working.
Here's the CSS code:
.svg path {
fill: #55acee;
}
And here's the HTML:
<img title="Twitter" class="svg" src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512.002' height='512.002' viewBox='0 0 512.002 512.002'%3E%3Cpath d='M512.002 97.21c-18.84 8.355-39.082 14.002-60.33 16.54 21.686-13 38.342-33.584 46.186-58.114-20.3 12.04-42.777 20.78-66.705 25.49-19.16-20.415-46.46-33.17-76.674-33.17-58.012 0-105.043 47.03-105.043 105.04 0 8.232.93 16.25 2.72 23.938-87.3-4.382-164.7-46.2-216.51-109.753-9.04 15.515-14.222 33.56-14.222 52.81 0 36.444 18.544 68.596 46.73 87.433-17.22-.546-33.416-5.27-47.577-13.14-.01.44-.01.88-.01 1.322 0 50.894 36.21 93.348 84.26 103-8.812 2.4-18.093 3.687-27.673 3.687-6.77 0-13.35-.66-19.764-1.888 13.37 41.73 52.16 72.104 98.127 72.95-35.95 28.175-81.243 44.966-130.458 44.966-8.48 0-16.84-.496-25.06-1.47 46.487 29.806 101.702 47.196 161.022 47.196 193.21 0 298.868-160.062 298.868-298.872 0-4.554-.104-9.084-.305-13.59 20.526-14.81 38.335-33.31 52.417-54.373z' fill='%23FFF'/%3E%3C/svg%3E">
I'm pretty sure I'm missing something, but... What is it?
Here's the fiddle: https://jsfiddle.net/v4jw615q/
Don't make it a src of an image, embed it directly
.svg path {
fill: red !important;
}
<svg class='svg'
xmlns='http://www.w3.org/2000/svg' width='512.002' height='512.002' viewBox='0 0 512.002 512.002'>
<path d='M512.002 97.21c-18.84 8.355-39.082 14.002-60.33 16.54 21.686-13 38.342-33.584 46.186-58.114-20.3 12.04-42.777 20.78-66.705 25.49-19.16-20.415-46.46-33.17-76.674-33.17-58.012 0-105.043 47.03-105.043 105.04 0 8.232.93 16.25 2.72 23.938-87.3-4.382-164.7-46.2-216.51-109.753-9.04 15.515-14.222 33.56-14.222 52.81 0 36.444 18.544 68.596 46.73 87.433-17.22-.546-33.416-5.27-47.577-13.14-.01.44-.01.88-.01 1.322 0 50.894 36.21 93.348 84.26 103-8.812 2.4-18.093 3.687-27.673 3.687-6.77 0-13.35-.66-19.764-1.888 13.37 41.73 52.16 72.104 98.127 72.95-35.95 28.175-81.243 44.966-130.458 44.966-8.48 0-16.84-.496-25.06-1.47 46.487 29.806 101.702 47.196 161.022 47.196 193.21 0 298.868-160.062 298.868-298.872 0-4.554-.104-9.084-.305-13.59 20.526-14.81 38.335-33.31 52.417-54.373z' fill='#FFF'/>
</svg>
When there is "fill" attribute in "path" element, you can not control SVG style in external CSS file. So:
(embed the svg code)
delete "fill" attribute in "path"
add your style to your CSS file (which now can be directly applied to
the svg element itself).
before using "!important", ask yourself: why I have to use this? I'm
sure you will find a logical way to not doing that. It's important to
know the reasons in coding.
Related
XPath for SVG element with fill variable?
I tried to use XPath to select an svg element's fill attribute value, which uses an CSS variable, but I'm getting nothing back. HTML: <svg class="unf-icon" viewBox="0 0 24 24" width="24" height="24" fill="var(--N400, #6C727C)" style="display: inline-block; vertical-align: middle;"> <path d="M9.5 18a.999.999 0 01-.71-1.71l4.3-4.29-4.3-4.29a1.004 1.004 0 011.42-1.42l5 5a.998.998 0 010 1.42l-5 5a1 1 0 01-.71.29z"></path> </svg> XPath attempts: //*[name()='svg' and fill='#6C727C'] //*[name()='svg' and #fill="#6C727C"] //*[name()='svg' and #contain(fill, "#6C727C")]
The third try was closest. Change //*[name()='svg' and #contains(fill, "#6C727C")] to //*[name()='svg' and contains(#fill, "#6C727C")] if you want to check that the fill attribute value has a substring of "#6C727C", or //*[name()='svg' and #fill="var(--N400, #6C727C)"] if you want to check that the fill attribute value exactly equals "var(--N400, #6C727C)" See also HTML 5, inline SVG, and namespace awareness for SVG DOM CSS var() function
CSS - unwanted spacing between letters from SVG logo
I've been working on a website for a while and now I'm trying to make it responsive. When I open it from my phone, the letters from the logo are getting distanced.
Logo on PC:
Photo
Logo on Phone:
Photo
Does anyone know why is this happening? Thanks in advance.
Edit:
HTML:
<img src = "resources/blue-logo.svg" class = "logo">
CSS:
.logo{
max-width: 100%;
width: 16em;
padding: 15px 0px 15px 20px;
letter-spacing: normal;
}
The problem was in svg coordinates:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53"><defs><style>.cls-1{font-size:76.08px;font-family:Montserrat-Bold, Montserrat;font-weight:700;}.cls-1,.cls-8{fill:#231f20;}.cls-2{letter-spacing:0em;}.cls-3{letter-spacing:0em;}.cls-4{letter-spacing:0em;}.cls-5,.cls-6,.cls-7{fill:#00aeef;}.cls-5{letter-spacing:0em;}.cls-7{letter-spacing:-0.02em;}</style></defs><text class="cls-1" transform="translate(0 162.29)"><tspan class="cls-2">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="cls-3" x="158.93" y="0">e</tspan>
<tspan class="cls-4" x="190.01" y="0">’</tspan><tspan x="207.57" y="0">s </tspan><tspan class="cls-5" x="260.5" y="0">Cus</tspan>
<tspan class="cls-7" x="385.86" y="0">toms</tspan></text>
Your phone screenshot clearly indicates, that your font is not loaded/available.
You could actually add a stylesheet to your svg defs to load the google font Montserrat directly.
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
</style>
</defs>
But I strongly recommend embedding the font using
the vecta.io/nano svg optimizer
Nano optimizer will also subset your font, the embedded font just includes the actually used glyphs/characters – resulting in much smaller file sizes than embedding a complete glyphset (~9 KB):
Your svg would have this code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.55 182.53" xmlns:v="https://vecta.io/nano"><defs><style>#font-face{font-family:"CustomFont";src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); font-weight:bold;font-style:normal;}</style></defs><style><![CDATA[.B{letter-spacing:0em}.C{letter-spacing:0em}.D{letter-spacing:0em}.E{letter-spacing:0em}.G{letter-spacing:-0.02em}]]></style><text transform="translate(0 162.29)" font-size="76.08" font-family="CustomFont" font-weight="700" fill="#231f20"><tspan class="B">E</tspan><tspan x="50.74" y="0">ddi</tspan><tspan class="C" x="178.93" y="0">e</tspan><tspan class="D" x="227.01" y="0">’</tspan><tspan x="245.57" y="0">s </tspan><tspan class="E" x="307.5" fill="#00aeef" y="0">C</tspan><tspan x="362.2" fill="#00aeef" y="0">us</tspan><tspan class="G" x="454.86" fill="#00aeef" y="0">t</tspan><tspan x="486.66" fill="#00aeef" y="0">oms</tspan></text><g fill="#231f20"><circle cx="627.19" cy="33.72" r="4.65"/><circle cx="622.54" cy="48.25" r="4.65"/><circle cx="607.42" cy="51.74" r="4.65"/><circle cx="618.47" cy="62.79" r="4.65"/><circle cx="596.96" cy="41.28" r="4.65"/><circle cx="611.49" cy="37.21" r="4.65"/><path d="M641.72 51.75a36.72 36.72 0 0 0 8.74 26.16L640 88.37l6.46 6.46 11.24-11.24 2.13-2.13-.07-.06 52.89-52.88.06.07 7-7-.06-.06 5.81-5.82-6.4-7-9.3 9.31c-13.763-11.218-33.373-11.699-47.67-1.17L645.23-.01l-12.77 12.8 16.86 16.86a37.57 37.57 0 0 0-7.6 22.1zm9.3.58a35.75 35.75 0 0 1 10.44-22.68c6.39-6.39 14.53-10.46 22.67-10.46a26.1 26.1 0 0 1 18.61 5.23l-45.93 45.93c-4.04-5.23-6.35-11.63-5.79-18.02z"/></g><path d="M800.03 101.2L720.1 21.27l-7 7 79.93 79.93zm-66.11 66.12h0l6.23-6.23-79.93-79.93-6.39 6.36 79.93 80z" fill="#00aeef"/><path d="M747.54 152.28l-7.2 7.2-1.18 1.18-.73.73-1.1 1.1-11.26 11.26 6.83 6.83 79.65-79.65-7.36-6.3z" fill="#231f20"/></svg>
However, when it comes to logos, I still recommend converting your text to paths in your graphic application (Adobe Ai, inscape, figma etc.).
It is still the most reliable technique.
Albeit svg <text> elements offer some benefits concerning accessibility – something like a <title> element or some aria-attributes added the svg would also to the trick.
How do I remove the "open image in new tab" thing?
So I'm making a website, and I just wanted to know, how do I get rid of this open image in new tab. it should look like this: image i did some digging around and on my website, Lunift, in the footer, there are some images. If you right click them, the "open image in new tab" isn't there. Here is the code I used: <svg height="25" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ProtonMail</title><path d="M12 20.351s-1.096-.108-1.955-.705c-.86-.596-6.58-4.688-6.58-4.688v8.098S3.513 24 4.55 24h14.9c1.036 0 1.085-.942 1.085-.942v-8.1s-5.723 4.092-6.58 4.69c-.86.595-1.955.704-1.955.704zm0-20.35S4.925-.23 3.465 7.623v5.35s.06.572 1.67 1.735c1.607 1.162 5.773 4.436 6.867 4.436 1.088 0 5.254-3.273 6.865-4.437 1.607-1.164 1.668-1.737 1.668-1.737V7.62C19.075-.229 12 .003 12 .003zm4.846 10.536h-9.69V7.623C8.14 3.723 12 3.67 12 3.67s3.863.054 4.846 3.954z"/></svg> I mean, I copied that so that doesn't mean I know. but please help Edit 1: What I mean is how do I make it so that when somebody right clicks on a image on my site, it doesn't say "Open image in new tab."
Export your SVG code to an external file.
For example: foo.svg
Then wherever you want to display the image, for example in a div element, do this;
<div style="background-image: url('/foo.svg');
width: 100%;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;"></div>
Don't forget to change foo.svg and height:60px to suit you.
Open image in new tab will no longer be available in your related div element.
Using style tag on div is optional.
and add style in css
.foo {
...bar
}
you can use as.
Save your svg file and use it in the tag like this
<img class='randomClass' src='./image.svg' alt='image' />
Try styling the image like this
.randomClass{
pointer-events: none;
}
if you have a css file just do
svg {
pointer-events: none;
}
if you don't have a css file, i recommend to use one but also you can just use inline styles
<svg style={pointer-events: none;} height="25" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ProtonMail</title><path d="M12 20.351s-1.096-.108-1.955-.705c-.86-.596-6.58-4.688-6.58-4.688v8.098S3.513 24 4.55 24h14.9c1.036 0 1.085-.942 1.085-.942v-8.1s-5.723 4.092-6.58 4.69c-.86.595-1.955.704-1.955.704zm0-20.35S4.925-.23 3.465 7.623v5.35s.06.572 1.67 1.735c1.607 1.162 5.773 4.436 6.867 4.436 1.088 0 5.254-3.273 6.865-4.437 1.607-1.164 1.668-1.737 1.668-1.737V7.62C19.075-.229 12 .003 12 .003zm4.846 10.536h-9.69V7.623C8.14 3.723 12 3.67 12 3.67s3.863.054 4.846 3.954z"/></svg>
How to calculate required hue-rotate to generate specific colour?
I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:
filter: sepia() saturate(10000%) hue-rotate(30deg);
and cycle through hue-rotate to find a colour, but is it possible to calculate this value in advance? Given that the specified hex value is quite dark, I imagine I will need to include the invert(%) filter as well.
Given a hex value of #689d94 what math do I need to do to calculate the desired hue-rotate and invert value to convert my white background image into the same colour?
Edit
Here's a snippet of a div with a white background image being filtered green. The trick here, is it is the whole of the div that is being filtered, not just the image. If I was to enter some text into the div the text colour would turn green as well.
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}
<div></div>
<p style="background: #689d94"></p>
The key in this case is to define an initial color. White nor black or any gray-scale is technically an actual color - you can't saturate or rotate it. You'll have to "colorize" it somehow, and the sepia filter is the only filter which do some form of colorizing.
It would be easier if your image was pure 100% red. Then you could just add the target degree directly and adjust saturation and lightness using HSL for target. For a white color start point the first step is to convert and define an intermediate color so we can saturate and rotate it later on.
Lets first darken the white image and apply sepia to get a "base" color we can work with:
filter: brightness(50%) sepia(1);
This will produce RGB color value of approximately:
rgb(178, 160, 128)
Step two is to convert that to HSL color-space which gives us:
hsl(38, 24.5%, 60%);
Base color result
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: brightness(50%) sepia(1);
filter: brightness(50%) sepia(1);
}
<div></div>
Converting base color to target color
These two first steps are static and its result will be reused every time we need to find a target adjustment (the actual value of sepia is defined in the SVG Filters specification).
Now we need to calculate what we need to apply to this base color to get target color. First convert target color, for example #689d94 as given in the question, to HSL:
hsl(170, 21.3%, 51.2%);
Then we have to calculate the difference between those. Hue is calculated by simply subtracting base from target. The same for Saturation and Lightness, but as we assume 100% of the base value we need to subtract the result from 100% to end up with a diff for the accumulated values:
H: 170 - 38 -> 132°
S: 100 + (24.5 - 21.3) -> 103.2% (relative to base 100% = 3.2%)
L: 100 + (51.2 - 60.0) -> 91.2% (relative to base 100% = -8.8%)
Convert those values to a filter-string by appending it to the existing filter, then set it on the div:
/* ------ base color ------ ------- new target -------------------------------*/
filter: brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
And to set it you would probably do something like this assuming filter and divElement are already declared:
...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;
Note that there is likely rounding errors as RGB is represented as integer, while HSL is floating point, so the actual result may not be exact, but it should get pretty close.
Live example
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
background-size:5em;
width:5em;
height:5em;
-webkit-filter:
brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
filter:
brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}
<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>
Viable alternative options are:
Predefine SVGs with the color already set.
Work with HSL/RGB directly in JavaScript and modify the SVG tree with the color directly for the shape rather than using filters. Filters are expensive performance wise, especially if many are chained as here and they are in addition a dominant part of a page. They are neither supported in all browsers.
The accepted answer is wrong. Hue-rotate does not conserve saturation or brightness and you have to do crazy math to come up with the correct values. The far easier way - which will result in a correct result - is to do a CSS filter that references an SVG filter. The feColorMatrix primitive in SVG filters allows you to pick a color directly.
Take your color #424242 - divide each RGB channel value by #FF and put them in the fifth column, first three rows of your color matrix. In this case, hex #42 is 68 in decimal, so divide that by 255 (#FF in decimal) and you'll get 0.257 - which you put in the fifth column, first three rows.
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: url(#colorize);
filter: url(#colorize);
}
<div>
</div>
<svg>
<defs>
<filter id="colorize" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0 0 0 0 .257
0 0 0 0 .257
0 0 0 0 .257
0 0 0 1 0"/>
/filter>
</defs>
</svg>
The only way to get the exact match is to use an SVG color matrix filter.
For RGB color #689d94, which is rgb(104, 157, 148), divide each primary color's value by 255:
Put these weights into the SVG <filter> matrix (5ᵗʰ column in the first 3 rows):
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="689d94" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix"
values="0 0 0 0 0.40784
0 0 0 0 0.61569
0 0 0 0 0.58039
0 0 0 1 0"/>
</filter>
</defs>
</svg>
The <filter> has to have id (I used the RGB hex code 689d94), so we can use it as a reference.
Since some browsers (e.g. Firefox) don't see/use the SVG filter if the display property of the SVG element is set to none, and having this SVG element in HTML code would inconveniently occupy some space, the best way is to convert this SVG into a pure inline CSS filter.
To get an inline filter value, take the above listed SVG code, transform it into a single line by remove line breaks and unnecessary spaces, then prepend url('data:image/svg+xml, and append the previously mentioned id as #689d94'):
div {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="71.063" height="60.938"><path d="M33.938 0l-16.97 19.906H1.625L0 21.781v8.781l1.25 1.407h4.781l5.875 28.969h46.969l6.188-28.97h4.687l1.313-1.343v-8.844L69.5 19.906H54.656L37.312 0h-3.375zm1.593 7.594l9.594 12.312H26.25l9.281-12.312zm-20.281 16s-.405 2.9 1.594 3.844c1.998.942 4.406.03 4.406.03-1.666 2.763-3.638 3.551-5.469 2.688-3.312-1.562-.531-6.562-.531-6.562zm41.188.031s2.749 4.969-.563 6.531c-2.487 1.162-4.848-1.541-5.438-2.656 0 0 2.377.88 4.375-.063 1.999-.942 1.625-3.812 1.625-3.812z"/></svg>') no-repeat; // optimized from http://richard.parnaby-king.co.uk/basket.svg
background-size: 100%;
display: inline-block;
height: 5em;
width: 5em;
}
#colored {
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="689d94" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.40784 0 0 0 0 0.61569 0 0 0 0 0.58039 0 0 0 1 0"/></filter></defs></svg>#689d94');
margin-left: 20px;
}
<!-- No <svg> in HTML; pure CSS -->
<div></div><div id="colored"></div>
<p style="background: #689d94"></p>
Hex Color To CSS Filter Converter Use this website to calculate the filter: https://isotropic.co/tool/hex-color-to-css-filter/
Here is an extension method in C# to do this (thanks Ωmega for the knowledge):
public static class ColorExtensions
{
public static string ToSvgFilter(this string value)
{
Color color = ColorTranslator.FromHtml(value);
int r = Convert.ToInt16(color.R);
int g = Convert.ToInt16(color.G);
int b = Convert.ToInt16(color.B);
decimal converted_r = (decimal)r / 255;
decimal converted_g = (decimal)g / 255;
decimal converted_b = (decimal)b / 255;
return $"url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"><defs><filter id=\"{value.Replace("#", "")}\" color-interpolation-filters=\"sRGB\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 {converted_r} 0 0 0 0 {converted_g} 0 0 0 0 {converted_b} 0 0 0 1 0\"/></filter></defs></svg>{value}')";
}
}
Here is the usage:
protected override async Task OnInitializedAsync()
{
_menuItemSvgFilter = "#f20c96".ToSvgFilter();
await base.OnInitializedAsync();
}
Here is the razor:
<NavLink class="menu-font" href="inboundorders">
<img src="/img/svg_icon/ICON_ORDER.svg" /> Orders
</NavLink>
and I added just this CSS to the razor at the bottom:
<style type="text/css">
.menu-font img
{
filter: #_menuItemSvgFilter;
}
</style>
If svg are being used then ...
You can open svg files with some text editor copy and paste to html file then change path color as required.
In below example code... I just changed the path color of center ring.
Hope this helps..
var imgg =document.getElementById("path");
imgg.style="fill:#424242";
<html>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.1.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 id="imgg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971 C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/>
<path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971 c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/>
<path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971 c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/>
<path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971 c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/>
<path id="path" d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559 c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559 C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821 c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822 c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</body>
</html>
For background image
var myimg='url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px"><g><path d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971 C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/><path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971 c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/><path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971 c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/><path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971 c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/><path d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559 c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559 C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821 c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822 c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg> \')';
document.getElementById("mydiv").style.backgroundImage =myimg ;
//changing color according to theme .. new theme color :#424242
myimg=myimg.replace(/#91DC5A/g,"#424242");
document.getElementById("mydiv").style.backgroundImage =myimg ;
div {
background-size:5em;
width:5em;
height:5em;
}
<html>
<body>
<div id="mydiv"></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>
</body>
</html>
Embed one image of a SVG sprite in HTML
I have an automatically generated SVG spritemap (grunt-svg-sprite) which looks like this file: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69"> <svg width="116" height="25" viewBox="0 0 116 25" id="block1" y="0"> <path fill="#fff" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/> <path fill="#D5FF54" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/> </svg> <svg width="20" height="20" viewBox="0 0 20 20" id="block2" y="25"> <path fill="#FF001A" d="M.5.5h19v19H.5z"/> <path fill="#1D1D1B" d="M19 1v18H1V1h18m1-1H0v20h20V0z"/> </svg> <svg width="27" height="24" viewBox="0 0 27 24" id="block3" y="45"> <path d="M.5.5h26v23H.5z"/> <path fill="#6BFF4E" d="M26 1v22H1V1h25m1-1H0v24h27V0z"/> </svg> </svg> This SVG consists of three "images" which have the IDs "block1", "block2" and "block3". I want to display only "block1" on my web page, so that the dimensions of this image should be scalable. I want to set the width to 10rem and the height should be automatically adjusted. I did it this way: <img src="https://cdn.mediacru.sh/ahw4Jhv0r6GG.svg#block1" style="width:10rem;"/> And here I created a JSFiddle. The problem is, that the web browser displays all three blocks instead of only "block1". How can I do this with an <img>? I have to support the latest versions of web browsers and only IE11, previous versions would be great, but is not a must. (I can not use the object HTML tag, because I am limited in my IE11 support - I can not see the objects on this page, I see the images of "iframe", "img" and "CSS background" but "object": three times: "Active content removed").
The easiest way to solve your problem is to add some CSS directly to your SVG file:
<style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>
This simple CSS prevents all the blocks from display and shows only the one you're targeting to.
Here is your SVG file with added CSS and JSFiddle demo.
While you use Grunt you can automatize it using e.g. grunt-string-replace task (running it on SVG file after processing with grunt-svg-sprite). The task should look more or less like this:
'string-replace': {
dist: {
files: {
'./src/preprocessedSVG.svg': './build/sprite.svg'
},
options: {
replacements: [{
pattern: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">',
replacement: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69"><style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>'
}]
}
}
You can add some variables or RegExps to pattern to make it more robust and bulletproof.
--
The other solution is to switch to inline SVG nicely described by Chris Coyer (http:// css-tricks.com/svg-sprites-use-better-icon-fonts/). There is also Grunt task for that - [grunt-svgstore] (https:// github.com/FWeinb/grunt-svgstore).
P.S. You need to copy those links and remove space after "https://" cause I am new to StackOverflow and can not post more than 2 links...