Why Hosting SVG Online Is Hard (… and How to Do It)

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.

[caption id="attachment_132704" align="alignright" width="480"] Game Characters designed an animated in SVG.[/caption]

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

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 devs to alter our SitePoint Wordpress install to allow SVG upload, but that might not be an option for everyone.

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

So, what about putting your SVG on 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 problem. You have access to a server somewhere. But if you're a designer, animator, or illustrator, this can be a serious show-stopper.

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.

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 name and hit 'Add file', you'll have a URL to a publicly accessible anonymous file.

Of course, it's probably easier to keep track of your files if you just create an account from the start.

How to Host your SVG in a Gist

1). Copy your SVG code

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

2). Create a new gist

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

[caption id="attachment_132714" align="aligncenter" width="1024"] A Gist containing your SVG code[/caption]

After it saves, you should see something like the screenshot above. Hitting the 'Edit' button at the top right gives you access to file edit/paste again.

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 right, the box will instantly tint green and below you'll see two new URLs for you to use.

[caption id="attachment_132718" align="aligncenter" width="1024"] Rawgit: Giving you a production-ready URL to your SVG image.[/caption]

One URL for production use, one for development. Keep things simple and just use the production URL. If you paste either of those URLs into your browser address bar and you should see your SVG render.

That is literally all RawGit does.

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

Continue reading %Why Hosting SVG Online Is Hard (… and How to Do It)%

by Alex Walker via SitePoint