styling svgs that are inline of css - css

Question

.player
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><line x1='1' y1='1' x2='9' y2='9' stroke='red'/><line x1='1' y1='9' x2='9' y2='1' stroke='red'/></svg>");
width: 100%;
height: 100%;
display: inline-block;
}
.one
{
fill: black;
}
.two
{
stroke: white;
}
Elements with the player class will have a background image that is an svg. If there are elements with both the player and the one or two class, is it possible to change the style of the svg if it's inlined like so? If not, how would I do a simple color change by having classes? Ideally, I wouldn't want to introduce any more markup in the html and prevent http accesses for such a small svg file.

Answer 1

As Douglas wrote, you can style only IMG elements with inline "src".
I use this technique:
Use common image with the path to your SVG:
<img src="my.svg" alt="">
Transform the "src" to inline style using JavaScript (jQuery):
$('img').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
Style your SVG using CSS:
path {
fill: #f00;
}
Done.

Answer 2

In order to modify your SVG with CSS, you have to use inline SVG, you can't modify it with a class if you use it as a background-image to an element.
If you want to make your authoring look cleaned up you can use a server side script to push the SVG's markup to your page (such as PHP's file_get_contents()).
Since there's no way around this, just compress your SVG as much as possible (I like this tool, there's some other good ones on the source I attached) and then write your svg as cleanly as possible, it shouldn't be that bloated looking if it's a small file.
Source: https://css-tricks.com/using-svg/
Sorry I couldn't be the bearer of better news.