Webcomics come in various file formats. Generally, artists publish their webcomics in raster image formats like JPG, PNG or even GIF, for webcomics that include animations. Web developpers have begun using scalable vector graphics for icons, graphs and special UI animations and effects. Despite the possibilities for responsive images, I have rarely seen comics in the scalable vector graphics (SVG) format.
I’m not sure why that is exactly.l For six months last year, a friend and I have created a weekly two panel strip in SVG. Though I have exported the final image in PNG, so that I can publish it on social media sites such as Facebook and Twitter. Maybe that’s one reason. SVG’s are rarely an option when submiting image files on social media or other public facing CMS’s. There’s a good reason for that.
SVG is made up of XML code. Users can potentialy create an SVG with an XML bomb, which is basically a piece of code that exponentially expands to exaust the ressources of your web server. So you can crash a server with SVG, we’re not off to a good start, but let’s keep an open mind.
There are scripts under way that can sanitize SVG images and prevent such flaws from being exploited. And this is only a problem if you use an online platform to publish your comic. There’s nothing preventing creators from publishing their comics on their own web server, except for the skills and little cash to pay for the service provider. Not all comic book artists are sysadmins, so that’s a factor. But thankfully, the knowledge is available in the form of written tutorials or screencasts. There are actually a ton of articles online that will make you proficient with SVG in no time.
Is it worth it?
Having worked closely with SVG over the past ten years, I’m going to attempt to make the case that SVG is not only a worthy file format for webcomic artists to explore, but it could very well be the ideal file format for publishing webcomics today.
SVG has been around for about 16 years at the time of writing this article. It’s curently supported in all modern browsers and is a part of many, if not most frontend developpers’ toolbox. From symbols to sprites, SVGs are ubiquitous on the web today.
If you care about image quality, that makes SVG a prime candidate for your comic. Its precise vector strokes, shapes and filters are rendered perfectly on every screen. It never looks compressed like a JPG, It’s not limited by its file size or pixel density like the raster formats.
With SVG, the browser draws the image to fit your screen from the XML/SVG instructions in the image file. It produces such a high quality image on screen, regardless on what device you are viewing it on.
The Big Picture
3.2% of websites use SVG, including some big names. Google converted its logo to SVG to reduce the filesize. Its logo is now 302 bytes gzipped. Facebook has begun to use SVG for it’s animated icons. The percentage of sites using SVG might seem low but don’t be fooled, this isn’t just a passing trend. SVG solves some very real problems, whether it be beautiful, lightweight icons, ui elements or illustrations.
But what about webcomics?
So that’s all well and good for these high traffic sites, but why haven’t any independant webcomic artists started to take advantage of this file format? Is it because the learning curve is a bit steep? Is it a lack of graphical tools available on the market? Or is it a general lack of knowledge as to what SVG actually is and does?
I think that SVG is underrated and misunderstood as an image format.
If more artists knew what SVG actually is, and what it can do, we would see more webcomics benefit immensely.
I’ve already covered why webcomics artists should be using SVG:
- Looks great
- A lot lighter
- Works in all modern browsers
- Part of the DOM (Document Object Model)
- Semantically meaningful
- Your animations don’t have to be linear like GIFs.
So What is SVG Exactly?
At its core SVG is basically line-art, created with XML tags, which in turn contain attributes and their respective values that form lines and shapes on a Cartesian plane defined by the viewBox.
What’s a viewBox?
The viewBox attribute defines the visible area of your image. The coordinate system in SVG is like the 4th quadrant of a Cartesian Plane. The top left of the image is located at coordinatesI x=”0” and y=”0”. The size of your viewBox depends on the width and height. The viewBox attribute takes the value of 4 numbers, the first two being the top, left coordinates, followed the the width and height of your visible area.
You can think of your SVG as a stage, where the viewBox is what the public sees when the curtain opens. Everything outside the viewBox is invisible to the public, as if it were backstage.
The viewBox attribute can be of great use for making animations in your comic.
Why is SVG So Hard To Get Right?
SVG is not simple. There, I said it. I mean, it can be simple sometimes, but it often isn’t if you want to take advantage of scripting. There are cross-browser issues and there are different ways on loading SVGs on your pages and each of them has limitations.
To top it off, browser implementations aren’t consistent. I’m looking at you, IE.
Of course, this inconsistency is not limited to SVG. There have always been inconsistencies in browsers, but the point is that if you want to make use of everything SVG has to offer, you’re going to enter that world. If you have a background as a webdev then it’s nothing new. If you’re coming into this as a illustrator who has never coded, the bar might seem a little high.
Have I scared you away yet?
If you’re not a programmer, you’re probably feeling a bit confused right now, and it’s become clear why artists don’t adopt SVG. I might have even convinced you not to spend time trying to make SVG comics because of the complexity. But I hope you’re a little stubborn and persistant like me.
There are lots of reasons to switch to SVG for your webcomics,the first is that it provides the sharpest lineart possible, adapted to every device and screen size. The scalable part means that the image is drawn to the exact specification of your screen.
The second reason to switch to SVG is the file size. Not only can SVGs reduce the file size in most cases (note that is can increase it in some cases), but being XML, it can be GZipped to reduce the size of the transfer even further.
So What if SVG can be Animated, So Can GIFs?
You can animate it like a GIF, but you can do it in ways that GIFs could never do. You can program your animations to have elements that are out of synch and can vary from one cycle to the next.
(include Quebec Cité logo)
You can have short animation cycles and long animation cycles, simultaneously.
GIFs can’t do this
For instance, this animation has a short 15 sec loop, but there is another subtle change that is happening that isn’t readily apparent. The light is slowly changing from one color to the other over the span of 24 hours. For a Gif to be able to do that, it would need to be a huge filesize.
Another Thing That GIFs Can’t Do
As if making your comics come to life wasn’t enough, you can even hide easter eggs.
So should you make comics with SVG? Should you take the time to learn to code, test it in different browsers and keep up to date with the technology? If you want to be on the bleeding edge of webcomics, then yes, by all means, take the plunge and get into it and push the possibilities to the limit, if not then, no. Don’t worry about it and focus on making great content. Great comics will always be cherrished regardless of their technical features.