Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fixes references to inline SVG elements when the <base> tag is in use.
/**
* SVG Fixer
*
* Fixes references to inline SVG elements when the <base> tag is in use.
* Firefox won't display SVG icons referenced with
* `<svg><use xlink:href="#id-of-icon-def"></use></svg>` when the <base> tag is on the page.
*
* More info:
* - http://stackoverflow.com/a/18265336/796152
* - http://www.w3.org/TR/SVG/linking.html
*
* One would think that setting the `xml:base` attribute fixes things,
* but that is being removed from the platform: https://code.google.com/p/chromium/issues/detail?id=341854
*/
(function(document, window) {
"use strict";
/**
* Initialize the SVG Fixer after the DOM is ready
*/
document.addEventListener("DOMContentLoaded", function() {
/**
* Current URL, without the hash
*/
var baseUrl = window.location.href
.replace(window.location.hash, "");
/**
* Find all `use` elements with a namespaced `href` attribute, e.g.
* <use xlink:href="#some-id"></use>
*
* See: http://stackoverflow.com/a/23047888/796152
*/
[].slice.call(document.querySelectorAll("use[*|href]"))
/**
* Filter out all elements whose namespaced `href` attribute doesn't
* start with `#` (i.e. all non-relative IRI's)
*
* Note: we're assuming the `xlink` prefix for the XLink namespace!
*/
.filter(function(element) {
return (element.getAttribute("xlink:href").indexOf("#") === 0);
})
/**
* Prepend `window.location` to the namespaced `href` attribute value,
* in order to make it an absolute IRI
*
* Note: we're assuming the `xlink` prefix for the XLink namespace!
*/
.forEach(function(element) {
element.setAttribute("xlink:href", baseUrl + element.getAttribute("xlink:href"));
});
}, false);
}(document, window));
@ianpetzer

This comment has been minimized.

Show comment
Hide comment
@ianpetzer

ianpetzer Dec 8, 2015

Thanks... This helped me to get my svgs working on Firefox

Thanks... This helped me to get my svgs working on Firefox

@GuillaumeGBzh

This comment has been minimized.

Show comment
Hide comment
@GuillaumeGBzh

GuillaumeGBzh Jan 6, 2016

Thanks for this polyfill !

Thanks for this polyfill !

@jbouzekri

This comment has been minimized.

Show comment
Hide comment
@jbouzekri

jbouzekri Jan 26, 2016

Same here. Many thanks !!!!

Same here. Many thanks !!!!

@saadshahd

This comment has been minimized.

Show comment
Hide comment
@saadshahd

saadshahd Jan 30, 2016

Thanks a lot ❤️ ❤️ ❤️

Thanks a lot ❤️ ❤️ ❤️

@Klenkes

This comment has been minimized.

Show comment
Hide comment
@Klenkes

Klenkes Feb 19, 2016

Huge thanks from me too!
Since I am male no red hearts but both thumbs up, a long and happy life, and again many thanks for saving my day.

Klenkes commented Feb 19, 2016

Huge thanks from me too!
Since I am male no red hearts but both thumbs up, a long and happy life, and again many thanks for saving my day.

@w8r

This comment has been minimized.

Show comment
Hide comment
@w8r

w8r Apr 7, 2016

@leonderijke, thank you big time! if only I could get the time back I wasted finding out what causes that in a huge app))

w8r commented Apr 7, 2016

@leonderijke, thank you big time! if only I could get the time back I wasted finding out what causes that in a huge app))

@havarnov

This comment has been minimized.

Show comment
Hide comment
@havarnov

havarnov Apr 29, 2016

As far as I can tell this is an issue in Chrome as well.

As far as I can tell this is an issue in Chrome as well.

@felixpfeiffer

This comment has been minimized.

Show comment
Hide comment
@felixpfeiffer

felixpfeiffer May 13, 2016

Thanx for that. You saved my life!

Thanx for that. You saved my life!

@gera2ld

This comment has been minimized.

Show comment
Hide comment
@gera2ld

gera2ld May 17, 2016

This is great! But still has problem in Chrome.

gera2ld commented May 17, 2016

This is great! But still has problem in Chrome.

@p-hebert

This comment has been minimized.

Show comment
Hide comment
@p-hebert

p-hebert May 23, 2016

You good sir, have just saved me from seeing a 70+ hour plugin fail miserably because its icons wouldn't show.
Long life to you.

You good sir, have just saved me from seeing a 70+ hour plugin fail miserably because its icons wouldn't show.
Long life to you.

@lastmjs

This comment has been minimized.

Show comment
Hide comment
@lastmjs

lastmjs Aug 24, 2016

Thanks a ton! Can we get a license for this?

lastmjs commented Aug 24, 2016

Thanks a ton! Can we get a license for this?

@adyz

This comment has been minimized.

Show comment
Hide comment
@adyz

adyz Aug 31, 2016

Sometimes I have some # links that I forgot to preventDefault and when I have locations like localhost:3000/# the script does not work properly.

You can add .replace('#', ''); to the baseUrl after replacing hash

adyz commented Aug 31, 2016

Sometimes I have some # links that I forgot to preventDefault and when I have locations like localhost:3000/# the script does not work properly.

You can add .replace('#', ''); to the baseUrl after replacing hash

@mattiLeBlanc

This comment has been minimized.

Show comment
Hide comment
@mattiLeBlanc

mattiLeBlanc Jan 20, 2017

Great find, it took me a while to figure out the my BASE tag was the culprit.
Tip for people using Angular or React: make a SVG component that does the path replacement on render.
For my angular app, the Domload event would happen before any of the ng-repeated rows would be rendered so the paths would not be replaced. Turning the svg into a component solved that for me since on creation I could replace the path.
cheers

Great find, it took me a while to figure out the my BASE tag was the culprit.
Tip for people using Angular or React: make a SVG component that does the path replacement on render.
For my angular app, the Domload event would happen before any of the ng-repeated rows would be rendered so the paths would not be replaced. Turning the svg into a component solved that for me since on creation I could replace the path.
cheers

@lnked

This comment has been minimized.

Show comment
Hide comment
@lnked

lnked Feb 7, 2017

Thanks!

lnked commented Feb 7, 2017

Thanks!

@scottadamsmith

This comment has been minimized.

Show comment
Hide comment
@scottadamsmith

scottadamsmith Apr 3, 2017

This saved my team the work of re-exporting all of our SVGs, thanks!

This saved my team the work of re-exporting all of our SVGs, thanks!

@rik

This comment has been minimized.

Show comment
Hide comment
@rik

rik Apr 24, 2017

This workaround will soon not be needed anymore. Firefox and Edge are changing behaviours so by October 2017, we can remove it from our projects.

rik commented Apr 24, 2017

This workaround will soon not be needed anymore. Firefox and Edge are changing behaviours so by October 2017, we can remove it from our projects.

@javiergbas

This comment has been minimized.

Show comment
Hide comment
@javiergbas

javiergbas May 23, 2017

Saved my day, thanks!!

Saved my day, thanks!!

@ztd127

This comment has been minimized.

Show comment
Hide comment
@ztd127

ztd127 Jun 7, 2017

Thanks!!!!!

ztd127 commented Jun 7, 2017

Thanks!!!!!

@bbeckmann

This comment has been minimized.

Show comment
Hide comment
@bbeckmann

bbeckmann Jun 29, 2017

Thank you very much, Sir! 👍

Thank you very much, Sir! 👍

@RohinMohanadas

This comment has been minimized.

Show comment
Hide comment
@RohinMohanadas

RohinMohanadas Jul 7, 2017

The same behavior occurs with "fill" attribute as well. Added one more statement to handle that in the workaround. Not sure if there will be more attributes that may be affected by tag.

/* * Find alluseelements with a namespacedfill` attribute, e.g.
*
*
* See: http://stackoverflow.com/a/23047888/796152
*/

        [].slice.call(document.querySelectorAll("use[*|fill]"))

        /**
        * Filter out all elements whose namespaced `fill` attributes doesn't
        * which doesnt have cross referenced values
        *
        * Note: we're assuming the `url(` prefix for the cross referenced fills !
        */
        .filter(function(element) {
            return (element.getAttribute("fill").indexOf("url(") === 0);
        })

        /**
        * Insert `window.location` to the `fill` attribute value,
        * in order to make it an absolute IRI
        *
        */
        .forEach(function(element) {
            var attrVal = element.getAttribute("fill");
            var idx = attrVal.indexOf("url(");
            element.setAttribute("fill",attrVal.slice(0,idx+4)+baseUrl+ attrVal.slice(idx+4));
        });   `

RohinMohanadas commented Jul 7, 2017

The same behavior occurs with "fill" attribute as well. Added one more statement to handle that in the workaround. Not sure if there will be more attributes that may be affected by tag.

/* * Find alluseelements with a namespacedfill` attribute, e.g.
*
*
* See: http://stackoverflow.com/a/23047888/796152
*/

        [].slice.call(document.querySelectorAll("use[*|fill]"))

        /**
        * Filter out all elements whose namespaced `fill` attributes doesn't
        * which doesnt have cross referenced values
        *
        * Note: we're assuming the `url(` prefix for the cross referenced fills !
        */
        .filter(function(element) {
            return (element.getAttribute("fill").indexOf("url(") === 0);
        })

        /**
        * Insert `window.location` to the `fill` attribute value,
        * in order to make it an absolute IRI
        *
        */
        .forEach(function(element) {
            var attrVal = element.getAttribute("fill");
            var idx = attrVal.indexOf("url(");
            element.setAttribute("fill",attrVal.slice(0,idx+4)+baseUrl+ attrVal.slice(idx+4));
        });   `
@matheussguedes

This comment has been minimized.

Show comment
Hide comment
@matheussguedes

matheussguedes Aug 23, 2017

Thank you so much!

Thank you so much!

@WoodyWoodsta

This comment has been minimized.

Show comment
Hide comment
@WoodyWoodsta

WoodyWoodsta Dec 19, 2017

This is fantastic. Thank you 👍

This is fantastic. Thank you 👍

@SatyaAchanta

This comment has been minimized.

Show comment
Hide comment
@SatyaAchanta

SatyaAchanta Dec 29, 2017

Hello Everyone, Sorry if I my question is too naive. It seems I am having same issue in Microsoft Edge. How can I use the mentioned code snippet in my application ?. Do I have to include it in polyfills.ts file ?. Can someone help me out please ?. I tried adding it in polyfills.ts and adding this snippet using script tag in index.html file, but still not seeing icons in Edge and FF

SatyaAchanta commented Dec 29, 2017

Hello Everyone, Sorry if I my question is too naive. It seems I am having same issue in Microsoft Edge. How can I use the mentioned code snippet in my application ?. Do I have to include it in polyfills.ts file ?. Can someone help me out please ?. I tried adding it in polyfills.ts and adding this snippet using script tag in index.html file, but still not seeing icons in Edge and FF

@SatyaAchanta

This comment has been minimized.

Show comment
Hide comment
@SatyaAchanta

SatyaAchanta Jan 2, 2018

Just giving it another shot, is anyone still active here to help me out ?

Just giving it another shot, is anyone still active here to help me out ?

@ignlg

This comment has been minimized.

Show comment
Hide comment
@ignlg

ignlg Apr 9, 2018

As a note, the mask attribute is affected too. And this kind of fix is still needed for Safari (iOS / macOS), btw.

ignlg commented Apr 9, 2018

As a note, the mask attribute is affected too. And this kind of fix is still needed for Safari (iOS / macOS), btw.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment