Develop Reference

svg from sprite import as background image

In my vanilla JS project I like pulling svg images from svg sprite (which is in separated svg file). What bothers me a lot is that in this way I can only use svg images in HTML code, but I would also love to use them in css file. Is something like that even possible?
SVG sprite (located in separated file in my code). I heard that it doesn't work in tools like codepen so I only attach it here as plain text:
<svg width="0" height="0" class="hidden">
<symbol id="il_uk_coverage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><title>UK Coverage</title> <path d="M31,1A30,30,0,1,0,61,31,30,30,0,0,0,31,1ZM50,52.53A2.81,2.81,0,0,0,50.16,50,2.86,2.86,0,0,0,49,48.65,25.23,25.23,0,0,0,33.41,5.87a2.4,2.4,0,0,0-.13-.59,2.21,2.21,0,0,0-1.75-1.41,9.65,9.65,0,0,1-1.07-.26,5.26,5.26,0,0,0-3.7-.06c-.94.44-1.33.87-2.28,3.08a25.23,25.23,0,0,0-2.25,48,2.17,2.17,0,0,0,1.9,3c1.36.08,3.12.15,4.18.19h.12a3.22,3.22,0,0,0,2.48-1.16l.38-.47A25.44,25.44,0,0,0,35,55.92a32.51,32.51,0,0,0,3.57-.12c2.1-.22,4.18-.62,6.19-1,.83-.16,1.65-.32,2.47-.46a4.58,4.58,0,0,0,.77-.21,28.9,28.9,0,1,1,2-1.58Zm-16.44.76-1.65,0a3,3,0,0,0-2.4,1.11l-.55.66a.64.64,0,0,1-.51.23c-.82,0-2.08-.08-3.23-.14L27,53.36c.09-.09.5-.58.72-.85l.1-.12c1-1.21,1.87-1.36,3.91-1.45a3.08,3.08,0,0,0,2.19-1,2.81,2.81,0,0,0,.67-1.37,1.3,1.3,0,0,0-.34-1.17,1.33,1.33,0,0,0-1.16-.37,4,4,0,0,1-.48.07,10.54,10.54,0,0,1-6.7-1.77l3-2.66a1.28,1.28,0,0,0,.35-1.46l-1.07-2.69h4.46A1.3,1.3,0,0,0,34,37.36c.17-2,.42-5-2.12-7.17a3.48,3.48,0,0,1-.26-1l-.07-.36a2.37,2.37,0,0,0-.93-1.78,2.56,2.56,0,0,0-2.1-.5L26.72,27a.43.43,0,0,1-.37-.09.47.47,0,0,1-.17-.34,10.9,10.9,0,0,1,.08-2c.29-1.81.33-4.09-2-5.74a1.13,1.13,0,0,1-.26-.28,1.33,1.33,0,0,1-.16-.83A19.84,19.84,0,0,1,25.1,12l.22-.57c1.73-4.35,2.16-5.39,2.53-5.56a3.34,3.34,0,0,1,1.92.21l.61.16a.53.53,0,0,0,0,.12h0c-.32.36-.65.72-1,1.06a4,4,0,0,0-1,4.53,1.3,1.3,0,0,0,1.5.85l5.28-1.12a1.68,1.68,0,0,1-.08,1.74,15.12,15.12,0,0,0-1.28,3.17C33.4,18,33,18.57,32.31,18.82l-.08,0a1.33,1.33,0,0,0-.48.23,1.29,1.29,0,0,0-.49,1.14v0a1.35,1.35,0,0,0,.37.85,2.33,2.33,0,0,0,.17.28A2.85,2.85,0,0,0,34,22.82a3.27,3.27,0,0,1,.5.14c1.64.92,2.27,2.49,2.72,4.57a4.87,4.87,0,0,0,3.43,4.13,1.64,1.64,0,0,1,.43.58c.65,1.37,1.26,2.8,1.84,4.19l.56,1.31a1.65,1.65,0,0,1,.12.32,1.19,1.19,0,0,1,0,.16,2.58,2.58,0,0,0,2.92,3.09c1.15-.18,1.57,0,1.91.44A4.84,4.84,0,0,1,49,43.5l.12.48-3.79,4.26A1.3,1.3,0,0,0,46,50.36l1.59.43a.26.26,0,0,1,.19.18.2.2,0,0,1,0,.2,1.23,1.23,0,0,1-.95.59l-2.51.47c-2,.38-4,.78-6,1A37.77,37.77,0,0,1,33.51,53.29ZM23,53.56a23.94,23.94,0,0,1,.81-45.42c-.27.68-.58,1.45-.94,2.37l-.23.58c-.05.12-.25.64-.48,1.41A20.37,20.37,0,0,0,11,26.86a6.2,6.2,0,0,0-1.13,2.71A1.32,1.32,0,0,0,9.9,30a1.85,1.85,0,0,0,.63.86s0,.08,0,.12A20.49,20.49,0,0,0,25.76,50.78l-.07.08-.53.64Zm5.88-24.41a2,2,0,0,0,0,.26l.06.31a4,4,0,0,0,1.08,2.41,4.26,4.26,0,0,1,1.35,3.72c-.15,0-.29,0-.43,0A4.91,4.91,0,0,1,26.11,31a5,5,0,0,1,.22-1.45,3.09,3.09,0,0,0,.91,0ZM26.53,41.36l-2.44,2.13s-.06.07-.1.1a14.39,14.39,0,0,1-7.14-9.9,2.78,2.78,0,0,0,1.3.33h0a3.15,3.15,0,0,0,1.43-.38l.11-.07.57-.38a11,11,0,0,0,6.07,7.72Zm.29,8.35a19.17,19.17,0,0,1-15-18.52,4.23,4.23,0,0,0,1.27-.45l.12-.07,0,0c.07.08.15.2.24.31a3.82,3.82,0,0,0,1.2,1.2,4.27,4.27,0,0,1,.67.42,15.66,15.66,0,0,0,8,12.08,2.49,2.49,0,0,0-.09.82,2.45,2.45,0,0,0,1.14,1.91,15.92,15.92,0,0,0,3.36,1.67A5.24,5.24,0,0,0,26.82,49.71ZM21.35,18.58a15.67,15.67,0,0,0-4.26,5.11,6.26,6.26,0,0,0-2-.3,2.56,2.56,0,0,0-1.13.3,4.17,4.17,0,0,0-.93.65,19.14,19.14,0,0,1,8.74-10.15,20.71,20.71,0,0,0-.47,3.38A4.15,4.15,0,0,0,21.35,18.58Zm-3,12.79a.41.41,0,0,1-.17.05c-.12,0-.37-.21-.67-.45A8.34,8.34,0,0,0,16,30a3.34,3.34,0,0,1-.4-.5,5.49,5.49,0,0,0-.7-.8,1.74,1.74,0,0,0-.75-.59,1.72,1.72,0,0,0-.79-.12A6.94,6.94,0,0,1,15,26.06l.11-.07a3.66,3.66,0,0,1,3.24,1.79l1.32,2.67Zm7.43,5.52a2.11,2.11,0,0,0-.21,2l0,.1a9.7,9.7,0,0,1-4.13-6.6,2.33,2.33,0,0,0,.67-2.87l-.47-.94a9.59,9.59,0,0,1,2-3.82,16.72,16.72,0,0,0-.06,1.85,3.05,3.05,0,0,0,1.15,2.29,3.61,3.61,0,0,0,.36.23A6.45,6.45,0,0,0,24.81,31a6.23,6.23,0,0,0,2.53,5A2.09,2.09,0,0,0,25.75,36.89Zm-4.92-10-.15-.29a5.72,5.72,0,0,0-2.39-2.43,14.54,14.54,0,0,1,3.53-4.31s0,0,0,0a3.5,3.5,0,0,0,.94,1,2.25,2.25,0,0,1,1,1.85A10.81,10.81,0,0,0,20.83,26.91ZM51.61,43.19c0-.1-.06-.2-.08-.3a6.69,6.69,0,0,0-1.15-2.79,4.43,4.43,0,0,0-.71-.67A20.47,20.47,0,0,0,37.87,11.7a5.81,5.81,0,0,0-1-2.18A1.3,1.3,0,0,0,35.51,9l-4.8,1a1.5,1.5,0,0,1,.45-.67c.63-.62,1.22-1.28,1.72-1.86a2.3,2.3,0,0,0,.21-.33,23.93,23.93,0,0,1,18.52,36Zm-5.78-6.47-.09-.22a15.55,15.55,0,0,0,1-5.51,15.74,15.74,0,0,0-10.1-14.68,12,12,0,0,1,.7-1.58,4.73,4.73,0,0,0,.57-1.64,19.18,19.18,0,0,1,10.6,25.75,5.18,5.18,0,0,0-2.43-.07A3,3,0,0,0,45.83,36.72Zm-4-7.33a10.88,10.88,0,0,0-4.3-7.22,7.37,7.37,0,0,0-1.83-1.48,4,4,0,0,0-1-.36,6.24,6.24,0,0,0,1.5-2.79A14.46,14.46,0,0,1,45.44,31,14.06,14.06,0,0,1,45,34.66c-.49-1.17-1-2.36-1.55-3.53A4,4,0,0,0,41.86,29.39Zm-1.48-.8A3.64,3.64,0,0,1,39.72,27l-.09-.41A10,10,0,0,1,40.38,28.59Z"></path>
</symbol>
</svg>
This usage in my HTML works fine:
<svg class="icon-size-md" viewBox="0 0 40 40">
<use href="../resources/icons/sprite-all.svg#coverage"></use>
</svg>
I would like to import that svg from sprite into my CSS code e.g. for background-image.
.wrapper {
height: 50px;
width: 50px;
background: url('../resources/icons/sprite-all.svg#coverage'); // this doesn't work
}
<div class="wrapper"></div>
But it doesn't work for me. If this wasn't possible way how to use svg from sprite in both: <use> and css file, is there ANY other way? (and renaming "symbol" to "g" doesn't work for me)

How can I change an SVG color without using an ID in the SVG file itself?

Newbie to working with SVGs and I've run into a problem. Basically I'm using the Noun Project API pro version ( https://api.thenounproject.com/ ) to scrape icons as SVGs. Right now, I save the SVGs in a local folder. I want to be able to change the color of the icon (right now they download as black, and I want to change the color). I am loading the SVGs via the tag with a reference to the folder where the SVGs are being saved. I know it's fairly simple to change the color using vanilla JS (using document.getElementById('svgObject').contentDocument, and then accessing the inner document using a unique id). The problem is that the SVGs I save don't have any ID, and I don't know how to give them an ID. Right now, I'm looping through the folder and displaying the folder contents in a webpage. That's all working fine, but I can't manage to figure out how to change the color.
Basically, I just want all the icons in the folder to be set to a different color (for example, they could all be set to "red." They don't need to each have a different color). How do I do that without specifying the actual ID (since the SVG doesn't include an ID upon download), or else how do I add an ID to the SVG tag itself?

Assuming you have a bunch of svgs on your page and you'd like to change the color of each to the same color, you could do the following:
function changeSvgColors() {
const svgs = document.getElementsByTagName('svg')
for (let i = 0; i < svgs.length; i++) {
svgs[i].setAttribute('fill', 'red')
}
}
This will loop through every svg on your page and set their fill attribute to red.
Essentially, this is equivalent to doing this:
<svg viewBox="0 0 512 512" fill="red">
...
</svg>
Here's a quick demo:
JSFiddle
Alternatively, if you're using something like the img tag to load your svgs onto your page, using object instead would let you do the same thing as above.
Assuming your html looks like the following:
<div>
<object
data="http://localhost:5000/image.svg"
type="image/svg+xml"
></object>
</div>
Then,
function changeSvgColors() {
const objects = document.getElementsByTagName('object')
for (let i = 0; i < objects.length; i++) {
const object = objects[i]
const svg = object.contentDocument.rootElement
svg.setAttribute('fill', 'red')
}
}

One option would be using the svg as an image (or as an object if you prefer) and filters to change the color.
#theImage{filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);}
<img id="theImage" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/bone300.svg" >
Please read this article: Solved with CSS! Colorizing SVG Backgrounds
Yet another option is using the svg as a mask. Keep in mind that the support for mask is not that good.
#theDiv{
display: inline-block;
width:300px;
height:134px;
-webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/bone300.svg);
mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/bone300.svg);
mask-size: cover;
background:red;
}
<div id="theDiv"></div>
But the best option would be to use the svg inline. You may save all your icons in a root svg element with width="0"; height="0"; position="absolute". Next you can use the icons with <use> and you change the color using the fill attribute <use fill="red" xlink:href="..... or styling it in CSS

You can give the SVGs a class instead of an id & set the color using javascript's getElementsByClassName
This Mozilla article explains:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Your best shot in achiveing this is to make use of the fill attibute for svg elements. Now, you can work this out two ways
Method 1:
Using img tag like this <img src="your_file.svg" />. In this case, you will need to edit the file directly, and that's it, it should reflect everywhere you reference the svg.
Method 2:
You can use svg as inline like below. The advantage in this approach is that if you have varying instance of the same svg, then this is the way to go. On the other side, if your svg stays same throughout the app, this goes against the DRY principle.
svg {
max-width: 200px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M25,7l28,36l40-18l-36,25l19,44l-27-37l-41,17l36-26z" fill="#cfc"/>
<ellipse cx="50" cy="50" rx="32" ry="30" stroke="#fc0" fill="none" stroke-width="11"/>
<path d="M63,2l-7,43l42,17l-45-6l-16,42l7,-45l-42-16l45,6z" fill="#3cc"/>
</svg>

If you don't mind having the svg all one color, you could set the fill attribute of the svg to currentcolor. Then it will take on the color of the element that it is in.
#span1 {
color: red;
}
#span2 {
color: blue;
}
#span3 {
color: green;
}
<body>
<span id=span1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150" fill-rule="evenodd" fill="currentcolor">
<title>HTML5 Logo</title>
<path d="M12,0 188,0 172,180 100,200 28,180Z M45,37 156,37 154,59 69,59 71,81 152,81 146,149 100,162 54,149 52,114 74,114 76,132 100,139 124,132 127,103 51,103Z"/>
</svg>
</span>
<span id=span2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150" fill-rule="evenodd" fill="currentcolor">
<title>HTML5 Logo</title>
<path d="M12,0 188,0 172,180 100,200 28,180Z M45,37 156,37 154,59 69,59 71,81 152,81 146,149 100,162 54,149 52,114 74,114 76,132 100,139 124,132 127,103 51,103Z"/>
</svg>
</span>
<span id=span3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150" fill-rule="evenodd" fill="currentcolor">
<title>HTML5 Logo</title>
<path d="M12,0 188,0 172,180 100,200 28,180Z M45,37 156,37 154,59 69,59 71,81 152,81 146,149 100,162 54,149 52,114 74,114 76,132 100,139 124,132 127,103 51,103Z"/>
</svg>
</span>
</body>

How do I render svg images in React Native?

I've tried "react-native-remote-svg" and "react-native-svg-image"; neither of them manage to render the SVG file.
How do I handle SVG in React-native?
Example code:
import SVGImage from 'react-native-svg-image'
const EmailLogo = require('../static/others/Email.svg');
// Render etc....
<ButtonContainer>
<Button bgColor={colors.darkTeal} txtColor={colors.whiteText}
onPress={this.onSignInPress.bind(this)}>
LOG IN WITH
</Button>
<SVGImage
style={{ width: 80, height: 80 }}
source={EmailLogo}
/>
</ButtonContainer>
Result: It's a white square when it should be an email logo.
How does one handle SVG's properly in React-native?

I've been through this struggle. react-native-svg-icon helped me out, but there were some additional things that i had to do, to make it work.
First of all, this library uses react-native-svg underneath. And you need to convert your svg files into SVG objects that this library understands.
If your open your svg file with editor, it will look something like this
<svg xmlns="http://www.w3.org/2000/svg" viewBox="170.5 200.5 18.6 23">
<defs>
<style>.a{fill:#444;}.b{fill:#07b57a;}</style>
</defs>
<g transform="translate(171 201)">
<path class="a" d="M18.1,22.5H-.5V-.5H18.1ZM.5,21.5H17.1V.5H.5Z"/>
<rect class="b" width="5.4" height="1" transform="translate(9 5.4)"/>
<path class="b" d="M4.4,7.3,3,5.9l.7-.7.7.7L6.6,3.7l.7.7Z"/>
<rect class="b" width="5.4" height="1" transform="translate(9 10.5)"/>
<path class="b" d="M4.4,12.4,3,11l.7-.7.7.7L6.6,8.8l.7.7Z"/>
<rect class="b" width="5.4" height="1" transform="translate(9 15.6)"/>
<rect class="b" width="2.5" height="1" transform="translate(3.2 15.6)"/>
</g>
</svg>
You need to convert it to something like this
entry: {
svg: (
<G transform="translate(171 201)">
<Path fill="#444444" d="M-152.4-178H-171v-23h18.6V-178z M-170-179h16.6v-21H-170V-179z" />
<Rect x="-161.5" y="-195.1" fill="#07B57A" width="5.4" height="1" />
<Path
fill="#07B57A"
d="M-166.1-193.2l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-193.2z"
/>
<Rect x="-161.5" y="-190" fill="#07B57A" width="5.4" height="1" />
<Path
fill="#07B57A"
d="M-166.1-188.1l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-188.1z"
/>
<Rect x="-161.5" y="-184.9" fill="#07B57A" width="5.4" height="1" />
<Rect x="-167.3" y="-184.9" fill="#07B57A" width="2.5" height="1" />
</G>
),
viewBox: '0 0 18.6 23',
}
This is a representation of the svg file in components of react-native-svg library. One thing you need to pay attention here, is viewbox of the svg file. I am not sure why, but most of the time, it is 'off center'. I will show in screenshots below. Because of that, it cannot be displayed by the react-native-svg-icon as well. To bring it to center you can use Adobe Illustrator, or some other online tool to edit svg. One i used is http://editor.method.ac/. So, I uploaded my svg, recentered it and downloaded it again. and used that svg file to create object in my react native code.
This is my initial svg file that i uploaded to the service. if you zoom out and press cmd+a (or ctrl+a) to select all, it will highlight svg icon, like in screenshot below. You should position it to the white part, either by dragging it, or by setting X and Y on top right corner to 0s.
This is how it will look when centered
Once you save that svg file, use it to convert it to javascript object with react-native-svg components, more info on that can be found here
Once you create you svg objects, you can use it with react-native-svg-icon. You will find how to do that in the link I shared above.
I know, this is a lot of pain and seemingly over complicated, and I spent quite some time to make it work, but it is the only way I managed to accomplish it.
One other option would be to convert your svgs into font icons with icomoon.com and use it with react-native-vector-icons. but it will only work if your svgs are drawn with only one color, as multicolored ones cannot be converted to fonts
P.S. I didn't try, but maybe, libraries that you tried to use might work with centered svg file that we got from online service. Let me know if it works, then it can be helpful to other users as well.

react-native-svg-image and react-native-svg-image uses WebView to render SVG files so it do not support local files at the moment. Its written it the docs.
Use react-native-svg-uri to render SVG images in React Native from an URL or a static file. to use react-native-svg-uri you will need to link react-native-svg as well. So read docs carefully.

Confused about SVG styling with d3.js

The most d3.js examples use SVG to draw the diagrams, etc. This means for instance rect instead of div. This then again means, that CSS properties like drop-shadow cannot be applied.
The alternative approach is to define filters in <defs>. The same is true if you want to fill the rect with a gradient color. Is that right so far?
So I define some filter and gradients, but it seems very redundant to redefine these definitions for every page again. Wouldn't it be possible to reference all these definitions from a separate svg-file?
I tried things like: filter: url(.../my_file.svg) but it does not seem to work, but isn't that how it's supposed to be?

Say you have a file called filters.svg, and it contains a few filter defitions. It looks something like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="my_filter" x="0%" y="0%" width="100%" height="100%">
...
</filter>
</svg>
If you were using my_filter in that same document, you'd just refer to it using #my_filter. But you're not. You want to use it in another document. What you have to do then is refer to it in those documents as /filters.svg#my_filter. Like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="url(/filters.svg#my_filter)" />
</svg>
This is of course assuming that both documents are accessible from the same domain, and that they're located in the right places, etc. I don't know if this will work in CSS stylesheets, but it will work across SVG documents. Check out the section on Linking in the SVG Specification for more details.

modify stroke and fill of svg image with javascript

I am trying to modify the stroke and fill of an .svg image.
I have been getting some information from Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?.
I used javascript to manipulate it, the javascript in the header:
function svgMod(){
var s = document.getElementById("svg_img");
s.setAttribute("stroke","0000FF");
}
the html:
...
<body onload="svgMod();">
<img id="svg_img" src="image.svg">
...
Any help appreciated!
EDIT:1
I think the main problem here is how to display an svg image as an svg element, an actual image that instead of an ending like .png or .jpeg, uses an ending of .svg, and furthermore how the fill and stroke of it can then be manipulated!

If you use an img tag then for security reasons you will not be able to access the DOM of the image data. The image is effectively the same as an animated bitmap as far as the container is concerned.
Using an <iframe> or <object> tag will allow you to manipulate the embedded object's DOM.

I've already answered something like this before, save this snippet as an html file.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
EDIT: To prove this function can be set in the head, here is a modified version:
<html>
<head>
<script>
function svgMod(){
var circle1 = document.getElementById("circle1");
circle1.style.fill="blue";
}
</script>
</head>
<body>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
<button onclick=jacascript:svgMod();>Click to change to blue</button>
</body>
</html>

I think you will need to modify the stroke of the individual element, not just the svg element itself. The svg will be composed of a tree of nodes, and it is these nodes which have the stroke attribute.

I'm not sure if this has been resolved. I had experienced a similar scenario and the best way is to put the svg file in an <bject> tag and change the stroke property not fill property.
svgItem.style.stroke="lime";
Also you may refer to the section: Changing CSS Properties of SVG in this link
I had tested this and could change the stroke property. Please refer to this screnshot and below is the sample code which worked for me.
window.onload=function() {
// Get the Object by ID
var a = document.getElementById("svgObject");
// Get the SVG document inside the Object tag
var svgDoc = a.contentDocument;
// Get one of the SVG items by ID;
var svgItem = svgDoc.getElementById("pin1");
// Set the colour to something else
svgItem.style.stroke ="lime";
};

Here is a simple example that demonstrates modifying an attribute of an SVG HTML object using javascript:
<html>
<body>
<svg>
<rect id="A1" x="10" y="10" width="25" height="25" fill="red" />
</svg>
</body>
<script>
alert("Acknowledge to modify object color.");
var object = document.getElementById("A1");
object.setAttribute("fill", "green");
</script>
</html>