why cannot change style of my own svg icons

Question

I created a svg image using CorelDraw (export - svg).

Trying to follow the accepted answer here

inside head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='navt.css' rel='stylesheet'>
<script>
jQuery('img.svg').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) {
        var $svg = jQuery(data).find('svg');
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }
        $svg = $svg.removeAttr('xmlns:a');
        $img.replaceWith($svg);
    }, 'xml');
});
</script>

navt.css

.navtsvg{
    float:left;  // this works
    height:21px;  // this works
}

.navtsvg rect{
    fill:white;  // doesn't work
    color:white; // doens't work
    background:white;  // doesn'twork
}

.navtsvg path{
    fill:white;  // doesn't work
    color:white; // doens't work
    background:white;  // doesn'twork
}

inside body

<img class='svg navtsvg' id='navthome' src='svg/home-01.svg' alt='img'>

Any help?

score 2 · Accepted Answer · answered Oct 28 '18 at 18:52

What the code, you are using, is doing is looking for all SVG icons embedded via <img> elements...

<img src="something.svg"/>

and loading the associated SVG file (eg. "something.svg") and injecting it directly inline in your HTML page...

<svg ...>
   <... whatever ...>
</svg>

So that you can style it. You can't style SVGs embedded as an <img>.

Unless you have a good reason for doing it this way, then don't. Just put your SVG in your HTML yourself. Doing it the above way just slows your website's startup time.

If you have a lot of icons, then you might want to consider using an SVG "spritesheet". See: https://css-tricks.com/svg-symbol-good-choice-icons/

score -1 · Answer 2 · answered Oct 28 '18 at 16:11

-1

It is simply because you are using an image tag. if you want to style your svg, you need to embed it inside your html using inline svg tags. so in your case you're gonna need to export svg code in CorelDraw not the file. here gives a decent clarification of different ways you can embed svg inside html.

answered Oct 28 '18 at 16:11

Khnshn

94
1
8

how to explain the accepted answer on the link provided? There is no a word about exporting code to a svg maker. – blueSky Oct 28 '18 at 16:21
1

Wrap it in a `$(document).ready();` method. But it's definitely the wrong easy to go, forcing a client to manipulate your view rather than implementing SVG correctly. There are two better options: encode the SVG file with the colors you want, or use SVG elements rather than IMG elements. IMG is replaced content, and can't be manipulated the way you want without doing a convoluted swap that makes the browser change the DOM. – denmch Oct 28 '18 at 16:33

why cannot change style of my own svg icons

2 Answers2