iconic / svginjector Goto Github PK

View Code? Open in Web Editor NEW

975.0 975.0 145.0 819 KB

Fast, caching, dynamic inline SVG DOM injection library

License: MIT License

JavaScript 54.03% HTML 45.97%

svginjector's People

Contributors

Stargazers

Watchers

Forkers

isgabe kanwar-g hoetmaaiers cm0s vcichecka fu4k6pingu mauricionobrega solomonhawk realview francinen warnerandy billthompson inno-v codetrail judag derekewing miklobit anomeon town-creative pwntastic dimtac jojanosch alanbalcazar provatcn flobacher mrksmts manolenso yohored guerrerocarlos gesell sneistat howard ds007007 lfoposse hrvrts sean-roberts raffone pulcix kketch colorblindseb jeonginyoung evsgo cloudpanda dfdeagle47 mvanwijk joe-palmer pandaskii gtxorb cagomezt npbenjohnson mitkotschimev kevinsuttle caot anikwai roni5 sbutkaliuk aamirs332 helloayo jackwangcumt codercooooder ondrasak meco-group wshirey montazze gregcha hub-name aleclarson webmansa abruzzihraig giulioscaesar appjak34 jebcat1982 ihaettypo bovtik stefcab thingir hurdle1 ajt2 tiunov80 mohastudio gagoel walexy juliushue zzzyeetao destegabry js-van fingerleakers fuoridallarete kwdtje aenany-atmosphereiot egnbjork rcoh liffeman ztfer hundren sicjr webgast venkatrajgm tgls fermod

svginjector's Issues

Markers specified via `style` are not rendered

This happens because of the ID reassignment: elements have their IDs changed (e.g. <marker id="Arrow1Lend"> becomes <marker id="Arrow1Lend-0">) but the style declarations are not updated to match (e.g. <path style="marker-start:url(#Arrow1Lend)"> will remain unchanged).

You can see below a simple file that exhibits this problem:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="128"
   height="128"
   id="svg8338">
  <defs
     id="defs8340">
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="Arrow1Lend"
       style="overflow:visible">
      <path
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
         transform="matrix(-0.8,0,0,-0.8,-10,0)"
         id="path3795"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none" />
    </marker>
    <marker
       refX="0"
       refY="0"
       orient="auto"
       id="DotL"
       style="overflow:visible">
      <path
         d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
         transform="matrix(0.8,0,0,0.8,5.92,0.8)"
         id="path3854"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none;marker-end:none" />
    </marker>
  </defs>
  <metadata
     id="metadata8343">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-924.3622)"
     id="layer1">
    <path
       d="m 14.285713,989.50504 99.999997,0"
       id="path8346"
       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#DotL);marker-end:url(#Arrow1Lend)" />
  </g>
</svg>

SVGInjector messes up id's inside defs

The index of the injected svg seems to be inserted after id's, which is breaking url references

eg:

fill: url(#green)

image.svg:

<defs>
    <linearGradient id="green">
        ...
    </linearGradient>
</defs>

But when injected:

<defs>
    <linearGradient id="green-0">
        ...
    </linearGradient>
</defs>

SCRIPT5 Access is denied for remote SVGs in IE8 and IE9

Hi,

Hi, this excellent plugin works almost perfectly in my project, I'm only having problems to use SVGInjector in IE9.

My SVG files are hosted in Amazon S3 and the IE9 console displays this error:
SCRIPT5: Access is denied. (line 173)

The problem is that IE8 and IE9 don't support standard XMLHttpRequest (line 110).

I think that the problem can be solved using XDomainRequest for IE8 and IE9, based on this article: http://www.leggetter.co.uk/2010/03/12/making-cross-domain-javascript-requests-using-xmlhttprequest-or-xdomainrequest.html

Thank you very much!

Provide method or advice on removing/reducing load time

There is a consistent, noticeable delay in the appearance of icons loaded with the injector. If it can't be fixed, I (and others who find this to be a bad user experience) wouldn't use SVGs. Can you provide guidance in the docs on how to remove this delay? Perhaps there is a way to include the SVGs in the initial page load, or initially fill the space with the icon font, and then replace it seamlessly with the ajax SVG? Thanks!

npm publish (:shipit:)

Hey guys,

Could you please publish this to npm? you already have the package.json setup, so it should be no problem.

😄

[feature] title attribute transclusion

it would be good, if the injector could transclude the title attribute to the SVG, if possible (tho, some more work could be involved to properly implement that)

currently, the title just remains on SVG, but according to the SVG 1.1 specs, it would be better to use a <title> or <desc> element

WDYT?

SVG Stack compatibility

Hello,

Like this exemple : http://jsfiddle.net/24DNn/5/
It's possible to stack a lot of svg inside an other svg, like a sprite.

Nevertheless, SVGInjector doesn't work if we add a target "#IDofMySvg" at the end of the URL.
exemple: " img class="inject-svg" src="/images/sprite.svg#logo" "

My project have more than 150 svg and I really need to use Stack.

Have you an idea ?
Thanks !

SVG Injector pre-processor

Is there anything similar to this to pre-process the html and replace the img tags with embedded svg?

Final callback occurs before SVG(s) appear in DOM

I want to apply another jQuery plugin to all the inlined SVGs using the final callback rather than the 'each' callback, but at the point when the callback is called, the <svg> tags are not yet actually present in the DOM (or in other words the SVGs are not yet inlined).

This is what my callback looks like:

And this is the DOM at the moment the breakpoint occurs - note these are <img> tags:

How to dynamically change direction of icon?

How do you dynamically change the direction of iconic with the svginjector? Since the svginjector removes the <img> element what are you supposed to do to update the direction of the svg? Do you have to completely remove that node from dom and try to re-render it or?

Internet Explorer 11 svg images appears all black

I´m having some troubles with IE11, some svg's appear all black, while others don´t.
The main difference is that the one that don´t appear have id's and are more complex.
The simple one only have one class. They were made in illustrator, and they load well without the svg injector.
Here goes a bit of the svg code:

svg version="1.1" id="formacao_profissional" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 360 235" xml:space="preserve">

<defs>

    <style>

    .formacao_profissional .st0{fill:#AFD0EF;}
    .formacao_profissional .st1{fill:#FFFFFF;stroke:#009BDE;stroke-width:0.5;stroke-miterlimit:10;}
    .formacao_profissional .st2{fill:#B5D5F1;}
    #arm-down{transition: all .2s ease-in-out;}
    #arm-up{opacity:0; fill:#003349; transition: all .2s ease-in-out;}
    .formacao_profissional .st4{fill:#FFFFFF;}
    .formacao_profissional .st5{fill:#FFFFFF;stroke:#5EC6F2;stroke-width:0.25;stroke-miterlimit:10;}
    .formacao_profissional .st6{fill:#00091A;}
    .formacao_profissional .st7{fill:#003349;}
    .formacao_profissional .st8{fill:#009ADD;}
    .formacao_profissional .st9{fill:#0D6B95;}                                            
    #formacao_profissional:hover #arm-down { opacity:0 }
    #formacao_profissional:hover #arm-up { opacity:1 }            

    </style>

</defs>        

<g class="formacao_profissional">
<rect id="chao" x="-0.004" y="35" class="st2" width="360" height="200"/>

(...)

Any ideas?

add to bower

Might it be interesting to add SVGInjector as a bower package?
If so, I'm willing to spend some work on this.

First IDs are not unique

I just noticed, that when I use this super nice tool, the first IDs in the SVG is not changed. For example I have this SVG:

Here You can see that the id="a" in the circle tag is not touched at all, but the following IDs in the mask tags are changed. I have another example, where all the IDs stay the same:

<?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="StarNoGradient" fill-rule="nonzero"> <polygon id="Combined-Shape-Copy" fill="#E3B500" points="12 0 12 19.9 4.584 24 6 15.317 0 9.167 8.292 7.9"></polygon> <polygon id="Combined-Shape-Copy-2" fill="#999999" points="12 0 15.708 7.9 24 9.167 18 15.317 19.416 24 12 19.9"></polygon> </g> </g> </svg>

I am wondering now, if its a tag related problem or if I just miss something here?

Use flobacher/SVGInjector2 instead.

https://github.com/flobacher/SVGInjector2

Regularly updated and directly installable via bower/npm.

fire an event at the end of the queue

Since you do async loading of svg content, any code attempting to peek inside is almost guaranteed to fail. My solution to this (good enough for my purposes) is to fire an event when the last item in the queue has been processed and wrap the user code inside that event's listener:

var
  . . .
  processRequestQueue,
  event = new CustomEvent("svg-injector-done", {}),
  . . .

processRequestQueue = function (url) {
  var i, len;

  // Make these calls async so we avoid blocking the page/renderer
  function asyncClone(index) {
    setTimeout(function () {
      requestQueue[url][index](cloneSvg(svgCache[url]));
      // Tell the user we're done
      if (index === len - 1) {
        document.dispatchEvent(event);
      }
    }, 0);
  }

  for (i = 0, len = requestQueue[url].length; i < len; i += 1) {
    asyncClone(i);
  }
};

// Elsewhere:
document.addEventListener('svg-injector-done', function () {
  // Work with that SVG
});

Can you see any problems with this? Any alternative solutions?

I can't immediately think of a good way to run SVG-facing code for each image in the queue. Fire an event with a payload that somehow identifies the image?

Doesn't work in safari

Hello everyone!
I included my SVG element like that:
<img id="thumb-icon" class="inject-me" src="/images/svg/innovate.svg" title="Preview" alt="Preview">
it works good in chrome but only "Preview" message in safari.
Safari's console said me that:
Unable to load SVG file: /images/svg/innovate.svg
How I can manage that problem?
Some idea?

allow cache "prefilling" / preloading

hey again ;-)

i'm starting to use the iconic set with my current angular project ad i'd like to "preload" few icons and put them into the cache.
currently, it's not available and i need to load the icons the "normal" way.

it would be great to have something like

/**
 * parses data and adds it to the cache on success
 * @param  {String}      url  url to cache it at
 * @param  {String|Node} data SVG (data or string) to parse
 * @return {Boolean}          true on success,
 *                            false on failure
 */
function preload( url, data ) {
  // ...
}

that would eventually parse the data and return Boolean result of the "preloading".

Would you implement that, or do you prefer PR?

this method would improve loading speed of my icons a bunch, since i could just inline the SVGs and "preload" them before injecting the icons :-)
what do you think?

[Request] Ability to prune <style> elements before injection

SVGInjector is fantastic, I'm using it in the documentation for my software project.

In said documentation, I have ~30 very similar SVGs (examples of colored console output). Each SVG contains its own <style> element so that they remain portable. The problem is that when all of them are embedded, the browser is inundated with ~30 copies of the same style rules.

Removing the <style> elements afterward, with the each callback, is too late to mitigate any performance impact they might have.

If I could define a callback that pruned the <style> elements before they were appended, I could eliminate this problem. Alternatively, perhaps all I need is an option like evalScripts, but for styles (perhaps includeStyles?).

who is he and why is he on my site? :)

Is this No Longer Maintained?

Hi @protodave and other contributors.

First off, amazing work! This lib has been very helpful for developing without needing to manage inline SVG in source code.

It seems there are 11 pull requests open, with the oldest one dating back to 2014. Is this lib no longer being maintained?

I want to submit a PR to allow attributes like onClick, but am afraid that the PR will just sit like the others open.

"Is anybody out there listening?"

SVGs are downloaded twice when injected

I have an SVG in an image tag like this which gets injected fine:

<img class="inject-me" src="assets/images/logo.svg" />

However, when I look at the network traffic (in Chrome Network tab), I can see that the browser downloads it (svg+xml) and then svg-injector.js downloads it again (xhr).

How can I stop each of the SVGs getting downloaded twice? Is there a way of injecting the SVGs without using tags as this seems to be cause of the first unnecessary download.

Many thanks

ReferenceError: SVGInjector is not defined

Hi,

I insert this in the <head> tag but I get the title error:

<script src="svg-injector.min.js"></script>

<script>
    // Elements to inject
    var mySVGsToInject = document.querySelectorAll('.iconic-sprite');

    // Do the injection
    SVGInjector(mySVGsToInject);
</script>

Thanks for your help.

SVG not Found on the Server

Hey,

I've the problem that he did not found the svg on the server but it's there
GET http://xxx/wp-content/themes/XXX/assets/images/svg/icons/icon_26_26.svg 404 (Not Found)

Local it runs all fine but remote I've no chance that it works.

Any Idea?

using to replace existing elements without src attr

In our app we are using <span class="icon icon-name"></span> with an icon font. I was thinking of trying to switch over to using SVGs and thus came here.

For our current structure is it possible to let it remain as it is, but then I would map the class names to their corresponding SVGs and replace them using SVGInjector?

Great work on this btw.

Cheers

Injection race condition

From the Iconic forums:
https://useiconic.com/community/#!/tools:inject-safety-iconicjs-v0

We currently using iconic with our angularjs app.

In order to support dynamically added icons, we turned off the auto-inject selector, and have a directive to inject the iconic icon.

We originally had the auto-inject selector enabled together with our directive, but found a race condition where the auto-injection would still be running when the directive would start ‘injecting’; this would fail in the replaceChild call within iconic.min.js as the icon had already been processed.

We are finding another race condition, with a similar problem, where the directive might fire off multiple times and inject the same icon twice on the same element, failing with the same ‘replaceChild’ error.

Can you look at adding a check before injecting an icon to make sure it still needs injecting?

Note: This issue is in SVGInjector, on which iconic.js is built.

Safari 9.0.2. fails over cloneNode

using SVGinjector 1.1.3 on Amref.nl and I receive a javascript error on Safari 9.0.2

[Error] TypeError: sourceSvg.cloneNode is not a function. (In 'sourceSvg.cloneNode(true)', 'sourceSvg.cloneNode' is undefined)
    cloneSvg
    (anonieme functie)

This results in not showing both img nor svg on Safari.
I have no issue on Chrome nor Firefox.

(this issue looks a lot like #25 but I can't see any solution in it)

Using <picture> html element to provide alternative image resources

I am using your extention for our web site. It is very cool.

Webp format is verr effective and small on size. But safari is not supporting it.

I solve this problem for static images by providing alternative sources to my image:

   <picture class="img-fluid rounded-circle" alt="Hasan Behlül Bozal">
        <source srcset="img/alternative.webp" type="image/webp">
       <img class="img-fluid rounded-circle" src="img/alternative.jpg">
    </picture>

How can I apply this solution with SVGInjector.

To see the problem you can go to https://robotic.mobi with safari browser.

Missing closure in README

// Callback after each SVG is injected
console.log('SVG injected: ' + svg.getAttribute('id'));

Automatically injecting all svgs on a page - is this recommended or are there potential issues?

See: flobacher#9

Add ability to rewrite clipPath url() relative fragment id links in the SVG so they work properly when the <base> tag is being used

When using SVG clipPath elements, which are referenced and used via the url(#clip-path-id) syntax, adding the <base> tag to the page changes the meaning/location of that relative identifier fragment so the clipPaths can't be found (causing the SVG to not render as expected).

Using the <base> tag can also cause issues with SVG gradients, masks, markers, etc… which are also referenced by relative fragment id.

References:
https://useiconic.com/community#!/tools:icons-not-displaying-correc
http://stackoverflow.com/questions/24673855/svg-clip-path-working-locally-but-not-online

Media type 'application/ecmascript' is obsolete

As media type 'application/ecmascript' is obsolete (new 'text/javascript') line: 336 should be updated:

if (!scriptType || scriptType === 'application/ecmascript' || scriptType === 'text/javascript' || scriptType === 'application/javascript') {

Source: https://www.iana.org/assignments/media-types/application/ecmascript

Feature Request: Don't remove img until svg is rendered

There is a flicker between when SVGInejctor runs and removes the img tag and before the svg appears. I think the img should only be removed once the svg is ready so the cutover is transparent. Or maybe this is an option the dev can opt into.

Data-direction resets to default on injection

When injecting an icon from iconic that has a data-direction it resorts back to the default direction of the icon.

SVG Injector doesn't work if there is a URL parameter

<img data-src="/build/img/logo.svg?v=0.1.81" data-fallback="/build/img/logo.png?v=0.1.81" class="svg" alt="Logo">

Safari .cloneNode() fails

Doesn't work in Safari, this snippet throws an error

var cloneSvg = function (sourceSvg) {
    return sourceSvg.cloneNode(true);
};

one SVG for recurring instances of monochrome icons :-)

wouldn't it make sense to generate one SVG with <symbol> elements representing every requested SVG that could be referenced via <use>?
that would save a lot of repetition in the output HTML.

example:

<img class="inject-me" data-src="thumb-up.svg">
<img class="inject-me" data-src="thumb-up.svg">
<img class="inject-me" data-src="thumb-up.svg">
<img class="inject-me" data-src="thumb-up.svg">
<img class="inject-me" data-src="thumb-up.svg">

current solution:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="thumb-up" viewBox="0 0 8 8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
  <path d="M4.438 0c-.19.021-.34.149-.438.344-.13.26-1.101 2.185-1.281 2.375-.19.18-.439.281-.719.281v4.001h3.5c.21 0 .389-.133.469-.313 0 0 1.031-2.908 1.031-3.188 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.389-1.574.469-1.844c.08-.27-.053-.545-.313-.625l-.219-.031zm-4.438 3v4h1v-4h-1z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="thumb-up" viewBox="0 0 8 8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
  <path d="M4.438 0c-.19.021-.34.149-.438.344-.13.26-1.101 2.185-1.281 2.375-.19.18-.439.281-.719.281v4.001h3.5c.21 0 .389-.133.469-.313 0 0 1.031-2.908 1.031-3.188 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.389-1.574.469-1.844c.08-.27-.053-.545-.313-.625l-.219-.031zm-4.438 3v4h1v-4h-1z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="thumb-up" viewBox="0 0 8 8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
  <path d="M4.438 0c-.19.021-.34.149-.438.344-.13.26-1.101 2.185-1.281 2.375-.19.18-.439.281-.719.281v4.001h3.5c.21 0 .389-.133.469-.313 0 0 1.031-2.908 1.031-3.188 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.389-1.574.469-1.844c.08-.27-.053-.545-.313-.625l-.219-.031zm-4.438 3v4h1v-4h-1z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="thumb-up" viewBox="0 0 8 8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
  <path d="M4.438 0c-.19.021-.34.149-.438.344-.13.26-1.101 2.185-1.281 2.375-.19.18-.439.281-.719.281v4.001h3.5c.21 0 .389-.133.469-.313 0 0 1.031-2.908 1.031-3.188 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.389-1.574.469-1.844c.08-.27-.053-.545-.313-.625l-.219-.031zm-4.438 3v4h1v-4h-1z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="thumb-up" viewBox="0 0 8 8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
  <path d="M4.438 0c-.19.021-.34.149-.438.344-.13.26-1.101 2.185-1.281 2.375-.19.18-.439.281-.719.281v4.001h3.5c.21 0 .389-.133.469-.313 0 0 1.031-2.908 1.031-3.188 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.389-1.574.469-1.844c.08-.27-.053-.545-.313-.625l-.219-.031zm-4.438 3v4h1v-4h-1z"></path>
</svg>

proposed solution:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="iconic-symbols">
  <symbol viewBox="0 0 8 8" id="thumb-up_svg">
    <path d="M4.438 0c-.19.021-.34.149-.438.344-.13.26-1.101 2.185-1.281 2.375-.19.18-.439.281-.719.281v4.001h3.5c.21 0 .389-.133.469-.313 0 0 1.031-2.908 1.031-3.188 0-.28-.22-.5-.5-.5h-1.5c-.28 0-.5-.25-.5-.5s.389-1.574.469-1.844c.08-.27-.053-.545-.313-.625l-.219-.031zm-4.438 3v4h1v-4h-1z"></path>
  </symbol>
</svg>

<!--- ... --->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
    <use xlink:href="#thumb-up_svg" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
    <use xlink:href="#thumb-up_svg" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
    <use xlink:href="#thumb-up_svg" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
    <use xlink:href="#thumb-up_svg" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" class=" iconic-injected-svg inject-me" data-src="thumb-up.svg">
    <use xlink:href="#thumb-up_svg" />
</svg>

probably the holder could be hidden or even put into <head> (need to research that), but IMO the benefits are obvious ;-)

what do you think?

Invisible vector

I couldn't figure out why but injecting the attached vector doesn't show the vector on the page while it does exist in the DOM. I'm guessing it has to do with the gradient fill references...
jellyfish-anatomy.svg.zip

Internet Explorer 9 compatibility

I'm using SVG Injector and it works perfectly on IE 10 +, but on IE 9 SVGs are not loading. I inspected the source and I realized SVG Injector is using a base64 image. According to this, base64 is not supported on IE 9. So, I assume the only way to use SVG Injector on IE 9 is through fallbacks?

Feature request: auto detect png location

SVGinjector should have an option to auto detect the location of the fallback png files. It could look for them in the location of the svg files (replace .svg with .png).

Not working on chrome

Hi,

I downloaded a template with this plugin included but it doesn't work on Chrome (but works on Firefox...). I get the name of the class displayed instead of the SVG image. When I look in Chrome's code inspector (F12) I can see that every src attribute to the SVG image is replaced by "(unknown)" (instead of the path).

Anybody knows how to fix this issue ? Thanks

Provide a `pngFallback` option per element

Issue

Currently, the fallback mechanism is "global"; you provide a directory path and the Injector will swap all targeted .svg for .png. This has the drawback of requiring you to provide a new SVG for each PNG you need to fit the context :

Say you have a blue pictogram, they are named foo.svg and foo.png.

If you customize the colours of the SVG for a certain context, the basic PNG might no longer be appropriate/useable. In one location you've added a red stroke to your SVG, in another it's twice as large, or in another location you got a blue background and you colour your SVG white.

You'd necessarily need to create a new PNG (foo-stroked.png, foo-white.png, foo-large.png) and a corresponding SVG (foo-stroked.svg, foo-white.svg, foo-large.svg) for each new context.

This kind of defeats the purpose of a single SVG being flexible. Even if you just clone your blue-filled XML with a new filename.

Solution

What I've done on my side is tweak the injectElement() function to check if the current element has a data-fallback attribute. If not rely on the pngFallback:

var injectElement = function (el, evalScripts, pngFallback, callback) {

    // Grab the src or data-src attribute
    var imgUrl = el.getAttribute('data-src') || el.getAttribute('src');

    // We can only inject SVG
    if (!(/svg$/i).test(imgUrl)) {
        callback('Attempted to inject a file with a non-svg extension: ' + imgUrl);
        return;
    }

    // If we don't have SVG support try to fall back to png
    if (!hasSvgSupport) {
        var backupUrl = el.getAttribute('data-fallback') || el.getAttribute('data-png');
        if (!backupUrl && pngFallback) {
            backupUrl = pngFallback + '/' + imgUrl.split('/').pop().replace('.svg', '.png');
        }
        if (backupUrl) {
            el.setAttribute('src', backupUrl);
            callback(null);
        }
        else {
            callback('This browser does not support SVG and no PNG fallback was defined.');
        }

        return;
    }

// ...

And the HTML:

<img class="inject-me" data-src="foo.svg" data-fallback="foo-qux.png">

This way I can always use the same SVG but provide a unique PNG for each context.

What do you think? Is there something I'm missing or might not have noticed? Is this a viable idea?

If it isn't implemented, I can just fork this repo and apply the change for myself and whoever else might need this feature.

Fantastic library, by the way. Really digging it!

parentNode is null JS Error

Hey guys, I am using the iconic.js library and I can isolate that it's the SVGInjector line that is causing me troubles:

SVGInjector/svg-injector.js

Line 377 in 8fefa15

el.parentNode.replaceChild(svg, el);

The context of my issue is, I have an angular application that uses iconic to handle loading in the svgs. We are running into issues because of some weird intermediate states that the parentNode is null for certain elements, like when we are binding to the element before it gets into the dom like on a directive template replacement.

That said, I am wondering if making the check for whether or not the image is available to be replaced (via parentNode.replaceChild) is a condition worthy of being added as a prerequisite for processing similar to the perquisites of it being a .svg file type?