Load SVG’s from different “Domains / Ports / Protocols”

Ruben Azevedo
Mar 9, 2017 · 2 min read

TL’DR: You can’t (Just some workarounds).

I’m currently working on a project, and there was a need to load SVG images to the page. We thought like, ok, not a big deal, the tag SVG can help us doing that. Worst decision ever.

First, let me give you an example of what we tried to do:

<svg viewBox=”0 0 100 100">
<use xlink:href=”/path/to/svg.svg"></use> </svg>

Just to keep in mind, our stack is React, Redux, es6, Webpack and c# for the backend.

So, this worked fine while we were in localhost and the SVG was loaded. Then, we started the integration with the backend ninja guys.

Well, after the integration was made, console errors started to popup:

Unsafe attempt to load URL URL/TO/SVG.svg. Domains, protocols and ports must match.

After some heavy research, like almost two days, we saw an article on chromium blog that talks about this stuff. Apparently, this is a security issue, because a SVG is a XML, and you can’t load a XML file from different locations.

Currently, we have the main project running in a domain and the other project in another domain, and the main project loads the second one. So, the requests are based on another port. This can also occur if you try to load from a cdn.

From developer Mozilla:

For security reasons, some browsers could apply a same-origin policy on use elements and could refuse to load a cross-origin URI within the xlink:href attribute.

How can you solve this?

Like I said before, you cant load SVG’s from different ports, protocols or domains.

Our approach was:
Ok, if we can’t load, we will start to copy and paste all the SVG’s to the DOM. After 3 seconds of thinking, we were like, HELL NO!!

What if we had a loader in webpack, whose job was taking the SVG and inlining it into the DOM? So we don’t have to do nothing? Well, this is not the best option, but, do we have anything better?
We used a thing called svg-inline-react, which inlines the SVG. That was our approach.


First, we implemented the loader in webpack, like so:

{    test: /\.svg$/,    loader: 'svg-inline',}

Then, we made a custom component that solely receives a prop and inlines the SVG.

import SVGInline from ‘svg-inline-react’;export default Class Svg extends React.Component {    render() {        return <SVGInline role=”img” src={ newIcon } />;    }}

Example of usage:

import React from ‘react’;
import Svg from ‘../components/SvgInline’;
import Icon from ‘../icons/star.svg’;
<Svg icon={ Icon } />;

That’s about it! So the problem was loading SVG’s from different Port’s, and our approach was inlining it into the DOM. Not the best approach maybe, but it worked.

The UI files

Ramblings on UI development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store