CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Sulot
Sulot

Reputation: 514

How to use easily svg as icon?

I don't understand the "usefulness" of svg as it is not easily modifiable with CSS or Jquery. For example:

<object data="../headset.svg" width="30" height="25" type="image/svg+xml" class="svg svg-danger" id="mysvg">

Great I can decide the size but the the fill color. I want to reuse this svg multiple time inside the document.

With: var a=document.getElementById("mysvg").contentDocument;

I just get undefined.

The inside svg, that I don't want to hard code in my document:

<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 361.014 361.014" style="enable-background:new 0 0 361.014 361.014;" xml:space="preserve">
<g>
<g id="Layer_5_47_">
<path d="M331.035,126.94H318.01c-3.563,0-3.682-2.333-3.805-3.494C307.375,59.094,252.77,8.791,186.637,8.791h-12.26    c-65.644,0-119.929,49.56-127.409,113.229c-0.191,1.631-0.291,4.92-3.291,4.92H29.978C20.987,126.94,0,136.401,0,184.18v25.075    c0,35.436,20.987,43.609,29.978,43.609h43.584c8.991,0,16.347-7.356,16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347    c0,0-2.052-0.18-1.529-3.835c7.192-50.319,50.129-89.313,102.344-89.313h12.26c51.86,0,94.912,38.418,102.2,88.288    c0.235,1.608,1.111,4.86-1.385,4.86c-8.991,0-16.347,7.356-16.347,16.347v93.23c0,8.991,7.356,16.347,16.347,16.347h8.184    c2.25,0,1.868,1.798,1.667,2.704c-6.667,30.104-21.637,64.256-55.238,64.256h-24.889c-2.54,0-3.167-1.861-3.65-2.743    c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118,0-23.753,10.634-23.753,23.753c0,13.119,10.635,23.752,23.753,23.752    h22.933c9.112,0,17.023-5.132,21.005-12.662c0.348-0.658,0.633-2.026,3.321-2.026h25.054c22.823,0,53.365-11.341,69.259-65.373    c1.694-5.758,3.068-11.496,4.187-17.026c0.154-0.761,0.25-2.27,2.625-2.27h12.9c8.991,0,29.978-8.174,29.978-43.609v-25.075    C361.013,137.082,340.026,126.94,331.035,126.94z" />
    </g>
</g>

</svg>

1/ How can I color it in red with jquery or orange? I just don't get it. 2/ Why svg is not easier to use? Thanks,

Stef.

Upvotes: 1

Views: 185

Answers (2)

somethinghere
somethinghere

Reputation: 17350

Because you need the svg to be embedded as an actual SVG so your CSS applies to it, you could use a little utility script like this:

function replaceSVGS(elements){
    if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) return;
    elements.forEach(function(e){
        var src = e.getAttribute('data-svg');
        if(!src) return;
        var request = new XMLHttpRequest;
        request.addEventListener("load", function(){
            var a = document.createElement('div');
            a.innerHTML = this.responseText;
            a = a.querySelector('svg');
            e.parentNode.insertBefore(a, e);
            e.parentNode.removeChild(e);
        });
        request.open("GET", src);
        request.send();
    });
}

The script above will replace the elements with svg as long as they have data-svg - I would recommend using it like this:

replaceSVGS( Array.prototype.slice.call(document.querySelectorAll('img[data-svg]')) );

Now you don't have to copy paste the code at all, and this script will ensure SVGs are inserted where appropriate. You just need an element with data-svg:

<img src="test.jpg" data-svg="test.svg" />

Upvotes: 1

mattpark22
mattpark22

Reputation: 751

Consider using the SVG in CSS instead, you can compile it here (without base64 and with the mime type image/svg+xml: http://dopiaza.org/tools/datauri/index.php

Then add a red fill path in the SVG, and create a ".red" CSS class that is reusable.

It's not ideal, but it's better than putting the svg code on the page itself.

.mysvg {
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20361.014%20361.014%22%20style%3D%22enable-background%3Anew%200%200%20361.014%20361.014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%3Cg%20id%3D%22Layer_5_47_%22%3E%0D%0A%3Cpath%20d%3D%22M331.035%2C126.94H318.01c-3.563%2C0-3.682-2.333-3.805-3.494C307.375%2C59.094%2C252.77%2C8.791%2C186.637%2C8.791h-12.26%20%20%20%20c-65.644%2C0-119.929%2C49.56-127.409%2C113.229c-0.191%2C1.631-0.291%2C4.92-3.291%2C4.92H29.978C20.987%2C126.94%2C0%2C136.401%2C0%2C184.18v25.075%20%20%20%20c0%2C35.436%2C20.987%2C43.609%2C29.978%2C43.609h43.584c8.991%2C0%2C16.347-7.356%2C16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347%20%20%20%20c0%2C0-2.052-0.18-1.529-3.835c7.192-50.319%2C50.129-89.313%2C102.344-89.313h12.26c51.86%2C0%2C94.912%2C38.418%2C102.2%2C88.288%20%20%20%20c0.235%2C1.608%2C1.111%2C4.86-1.385%2C4.86c-8.991%2C0-16.347%2C7.356-16.347%2C16.347v93.23c0%2C8.991%2C7.356%2C16.347%2C16.347%2C16.347h8.184%20%20%20%20c2.25%2C0%2C1.868%2C1.798%2C1.667%2C2.704c-6.667%2C30.104-21.637%2C64.256-55.238%2C64.256h-24.889c-2.54%2C0-3.167-1.861-3.65-2.743%20%20%20%20c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118%2C0-23.753%2C10.634-23.753%2C23.753c0%2C13.119%2C10.635%2C23.752%2C23.753%2C23.752%20%20%20%20h22.933c9.112%2C0%2C17.023-5.132%2C21.005-12.662c0.348-0.658%2C0.633-2.026%2C3.321-2.026h25.054c22.823%2C0%2C53.365-11.341%2C69.259-65.373%20%20%20%20c1.694-5.758%2C3.068-11.496%2C4.187-17.026c0.154-0.761%2C0.25-2.27%2C2.625-2.27h12.9c8.991%2C0%2C29.978-8.174%2C29.978-43.609v-25.075%20%20%20%20C361.013%2C137.082%2C340.026%2C126.94%2C331.035%2C126.94z%22%20%2F%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%0D%0A%3C%2Fsvg%3E");
}
.mysvg.red {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20361.014%20361.014%22%20style%3D%22enable-background%3Anew%200%200%20361.014%20361.014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%3Cg%20id%3D%22Layer_5_47_%22%3E%0D%0A%3Cpath%20fill%3D%22red%22%20d%3D%22M331.035%2C126.94H318.01c-3.563%2C0-3.682-2.333-3.805-3.494C307.375%2C59.094%2C252.77%2C8.791%2C186.637%2C8.791h-12.26%20%20%20%20c-65.644%2C0-119.929%2C49.56-127.409%2C113.229c-0.191%2C1.631-0.291%2C4.92-3.291%2C4.92H29.978C20.987%2C126.94%2C0%2C136.401%2C0%2C184.18v25.075%20%20%20%20c0%2C35.436%2C20.987%2C43.609%2C29.978%2C43.609h43.584c8.991%2C0%2C16.347-7.356%2C16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347%20%20%20%20c0%2C0-2.052-0.18-1.529-3.835c7.192-50.319%2C50.129-89.313%2C102.344-89.313h12.26c51.86%2C0%2C94.912%2C38.418%2C102.2%2C88.288%20%20%20%20c0.235%2C1.608%2C1.111%2C4.86-1.385%2C4.86c-8.991%2C0-16.347%2C7.356-16.347%2C16.347v93.23c0%2C8.991%2C7.356%2C16.347%2C16.347%2C16.347h8.184%20%20%20%20c2.25%2C0%2C1.868%2C1.798%2C1.667%2C2.704c-6.667%2C30.104-21.637%2C64.256-55.238%2C64.256h-24.889c-2.54%2C0-3.167-1.861-3.65-2.743%20%20%20%20c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118%2C0-23.753%2C10.634-23.753%2C23.753c0%2C13.119%2C10.635%2C23.752%2C23.753%2C23.752%20%20%20%20h22.933c9.112%2C0%2C17.023-5.132%2C21.005-12.662c0.348-0.658%2C0.633-2.026%2C3.321-2.026h25.054c22.823%2C0%2C53.365-11.341%2C69.259-65.373%20%20%20%20c1.694-5.758%2C3.068-11.496%2C4.187-17.026c0.154-0.761%2C0.25-2.27%2C2.625-2.27h12.9c8.991%2C0%2C29.978-8.174%2C29.978-43.609v-25.075%20%20%20%20C361.013%2C137.082%2C340.026%2C126.94%2C331.035%2C126.94z%22%20%2F%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%0D%0A%3C%2Fsvg%3E");  
}
<div class="mysvg"></div>
<div class="mysvg red"></div>

Upvotes: 0

Related Questions