Design & UX
Article

Why SVG Image Hosting is Hard (… and How to Do It)

By Alex Walker

I’ve been talking about SVG a lot lately. Frankly, there’s a lot to excited about if you’re a designer, game maker, UI expert or animator.

Game Characters designed an animated in SVG.

Game Characters designed an animated in SVG.

The tools are getting really good. At the high end of design tools, Adobe Illustrator has moved from spaghetti-code embarrassment to genuinely impressive in the SVG export stakes in about 2 years.

Smaller scale tools like Boxy SVG offer excellent alternatives without costing a cent.

The browsers are playing nice too. Audiences vary from site to site, but in 2016, we can rely on most of our users being able to see our SVGs render properly.

So the question for me is: Outside of some icon sets and a logo or two – why aren’t we seeing SVGs used more often on the web?

The Elephant in the Room: SVG Image Hosting

How do you get your SVG online where people can see it?

It sounds stupid at first. You created this cool vector graphic. Can’t you just upload it like a JPG, GIF or PNG?

Yes and no.

By default, most online services block the uploading of SVG files. Try uploading an SVG to a stock WordPress install and you’ll get an ‘Illegal file type‘ message. I managed to get our sysadmin to alter our SitePoint WordPress install to allow SVG upload, but that might not be an option for everyone.

Likewise, Facebook, Twitter, Behance, Tumblr and Blogger all block any attempts to upload SVGs.

So, what about uploading your SVG to one of the big image hosting services?

No dice. Unfortunately, you’ll get no love from Flickr, Photobucket, Imgur, Google Photos or any recognised service that I could find.

If you’re a sysadmin or typical coder this probably isn’t a big problem for you. You probably have access to a web server you control somewhere.

But if you’re a designer, animator, or illustrator, this can be a serious show-stopper. Questions on StackExchange dating back to 2013 are met with mostly a shrug. Last year in the SitePoint forums, Ralph offered the suggestion of embedding the SVG as a dataURI, which is a good option – particularly for smaller, compact graphics.

But this might get a little unwieldy for maps, infographics, and larger images.

Why the Fear of an SVG Planet?

There is probably a two-part answer to this question.

Firstly, while SVG is not a new idea – the W3C spec was written in 1998 – support for SVG is kinda new. That means building a service that supports SVG upload would have been a waste of time till recently.

Secondly, there are some extra security… queries to contend with. As SVG is a text file format, it’s 100% legitimate to embed live JavaScript into the file. This makes SVG powerful, but also open to manipulation by evil forces.

At the moment, it seems nobody is willing to take responsibility for hosting that risk. Lots of applications – including WordPress, Tumblr, Behance and Blogger – will happily render an SVG in your page. They just won’t allow you to upload it. It’s like embedding a Youtube video.

So how can you host my SVG online?

While there are currently no easy ‘drag-n-drop’ SVG hosting services, I have found a useful stop-gap.

Github & SVG: Getting the Gist

Ok, so half of you reading this probably thought ‘So what? I use Github every day‘. If you’re in this camp, jump to the ‘how-to’ part below.

The other half probably thought ‘What? That weird, impenetrable, ‘codey’ thing the devs use? No way I’m using that!’

Sure, if you don’t use it, Github looks equal parts confusing and boring. However, it’s arguably our best way to host SVGs online and we only need a very basic understanding to use it.

Most activity on Github takes place within code repositories or ‘repos’ – version-controlled, multi-user libraries containing all code within a project. These can house many thousands of files and hundreds of users.

But Github also has a thing called ‘Gists’. Gists are designed for sharing small code samples of whatever you like. If you create a free Github account, you can add new gists to your account whenever you like. They’re 100% free.

The interesting thing about gists is we don’t even have to be logged in to create one. If you open this page, paste in some text in, give it a filename and hit ‘Add file‘, you’ll have a publicly-accessible URL to an anonymous file.

Of course, it’s probably easier to keep track of your files if you just create a free GitHub account from the start, but you don’t have to to try it out.

How to Host your SVG in a GitHub Gist

1). Copy your SVG code

Whether you’re creating your SVG in Illustrator or Boxy SVG or Sketch or any other editor, we need direct access to the code. Open your SVG file in your preferred code editor (Brackets, Atom, Sublime, etc) and copy your entire SVG file to the clipboard.

2). Create a new gist

Gist Basics

Next, create a new gist, paste in your SVG code, give it a file name (i.e. ‘my-file.svg’) and hit ‘Add File’.

A  Gist containing your SVG code

A Gist containing your SVG code

After it saves, you should see something like the screenshot above. Hitting the ‘Edit’ button at the top right gives you ongoing access to edit/update/paste into the file again at any time.

So, we have our file online now, but we can’t just ‘hot-link’ this image file. We need to get it served correctly or it won’t be treated as an image.

3). Get the raw URL

On the right side of the frame above, you’ll see a ‘Raw‘ button. Hit that button and you’ll see a raw dump of your SVG source file.

All we need is that URL in your browser address bar – copy it to the clipboard.

4). Serve that URL via RawGit

Finally, go to RawGit.com and paste your gist URL into the big text box provided. If you’ve done everything correctly, the box will instantly tint green and below you’ll see two new URLs ready for you to use – one URL for production use, one for development.

Rawgit

Rawgit: Giving you a production-ready URL to your SVG image.

Adobe Typekit website

My Gist-hosted SVG

You might as well keep things simple and just use the production URL. If you paste either of those URLs into your browser address bar, you should see your SVG render.

That is literally all RawGit does.

Here’s a RawGit link to the SVG file I used above.

And that file used as a linked image here:

One other little hidden bonus? Your image is also now ‘source managed’. Click on the ‘Revisions’ link on your gist page and you’ll see any earlier iterations of your SVG artwork.

Why bother?

This tip might feel a little dry and technical and ‘codey’ but it unleashes a lot of possibilities for clever designers. For instance:

  • You could link your new SVGs into a larger Codepen demo. I’ve been developing HTML5 game graphics this way.
  • You could create a travel map in SVG and update it live as you travel – no need to export and upload a copy each time.
  • You could create an electoral prediction map and update the live document as new data comes to light.
  • You could create an electoral prediction map and update the live document as new data comes to light.

SVG truly offers us much better ways to do many of the things we use currently PNG and JPG for.

I hope Gists give you a reliable way to unleash that creative power in more places.

Originally published in the SitePoint Design Newsletter.

  • M S i N Lund

    That’s why I always host my SVG offline.

    • http://sitepoint.com Alex Walker

      I’m not sure how to respond to that.

      • M S i N Lund

        Don’t worry, you don’t have to.

      • Oussama Bouguerne

        hhhhhh!! makes wonder if we’re on the same page, doesn’t it ??

  • http://sitepoint.com Alex Walker

    As a side note: Although I think Gists are the best, most scalable, and most flexible public SVG hosting option available, I did come across an image hosting service called : https://imgh.us/

    It’s not pretty and I can’t speak to their reliability, long term viability or scale, but they do offer a standard IMGUR-like service that accepts SVG.

  • mapsiter

    I hosted my images (not only SVG’s) on Github and served them through Rawgit for a Codepen project just the way you explained. The only difference beeing that I had them in a private repo not as gist. I found that after a while my images were gone from the Pen like the links gone expired. Any thoughts on that?

    • http://sitepoint.com Alex Walker

      I know that Img.ur blocks images being loaded remotely from Codepen. They want to be a destination, not a hosting service. Github shouldn’t be doing that. Is it because they’re in a private repo?

  • http://sitepoint.com Alex Walker

    Fuego, did you read the article?

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.