At WordCamp Vancouver yesterday my favourite talk of the day was presented by Morten Rand-Hendriksen on using SVG’s in the web browser. I had barely any experience exploring what SVG’s can do in the browser and it was great to see code examples shared in real time. The ideas presented definitely got me excited for the future of web graphics and animation.
As someone who likes to design things from time to time I am very familiar with the Scalable Vector Graphic(SVG) format from a design point of view. I know that SVG’s save all the shapes, layers, text, and styling in code and that I can even modify or inspect the source code of a design. One of my favourite design tools: Inkscape actually uses a custom flavour of .svg as it’s default save format, with the ability to save to plain .svg files as well.
The WordCamp talk may have been plagued with some minor technical(projector overheating) issues and a bit too much information on using Grunticon but here’s what you need to know:
1. SVG in the browser kinda works now
While the SVG specification may have been around for a long time our web browser’s didn’t know how to handle it for some reason and now all modern browsers can display SVG’s.
2. SVG’s in the browser may look different and should be carefully optimized
The browser knows how to show an SVG now but that doesn’t mean the SVG will look the exact same in the browser as it does in a vector design tool like illustrator. Design tools may have to simplify the exported SVG to meet the standards and you will want to test your SVG’s display in a variety of browsers to make sure it looks good. Complex designs may not turn out how you expect so if you are designing with the goal of having it display as an SVG in the web browser you should test as you go. It is also a great idea to optimize your SVG code and Morten recommends SVGO(command line) or its web-based interface SVGOMG as a great way to shrink your SVG code size. If you use SVGOMG you can even toggle specific SVG features and metadata to see how that can visually impact your graphic, while letting you know your filesize savings compared to the original SVG code.
3. You can manipulate the individual layers and objects of an SVG graphic using CSS
In my opinion this is the coolest feature of SVG’s on the web. The objects in the graphic can be individually manipulated. We can recolour, resize, shift, fade, and even rotate the individual layers in the SVG graphic. Text can be manipulated within the graphic(if the text hasn’t been converted to vector paths and we have the proper fonts loaded in the browser). A piece(symbol) within the graphic can even be pulled out and used on it’s own somewhere else on the page. The possibilities for interactive animations and dynamic changes to graphics on the fly are likely only going to be limited by your imagination and how long it takes to code.
It is true that a lot of the things we can do with CSS to an SVG object could already be done to plain old rectangles, triangles, rounded rectangles, straight lines, or whole images. But the key feature of SVGs is that we can now manipulate and style custom vector shapes, instead of the just rudimentary shapes we could build with CSS.
4. Great tools exist for providing .png fallbacks when the browser can’t handle SVG
Even though modern browsers support the displaying of SVG’s we can’t totally ignore the people who are still ignorantly or forcefully stuck on older browsers that don’t support displaying SVG’s. A great solution is implementing a PNG fallback for those users and SVG Injector can make that process very simple. Users on older browsers will miss out on the best features of SVG and see only a normal PNG graphic, but that is much better than seeing nothing.
The future is going to include a lot of great uses of SVG
Now that SVG usage is hitting the mainstream market we should be seeing it used on a regular basis in creative and smart ways. This newfound freedom gets me excited for how we can make more interesting web pages and web apps. Here is a few starter ideas I had of how SVG can be used:
- Animating or colouring logos on the fly.
- Changing text in a graphic based on user feedback or the day of the week.
- Complicated animations on buttons
- Draw attention to important content or actions on a web page
- Graphing and charting data
- Adding content into a growing visualization
Some fun examples I found of SVG logo animations in action:
Could this SVG magic be useful for your business?
If your website has been looking for a bit more polish, pizzazz, charts or graphical interaction we think that you should consider using SVG’s. We are excited to work on some projects where we can use these new tools to make your web site or web app even better.
If you want to learn more about the technical side of SVG check out Morten’s list of resources or if you want to get started on a SVG project let us know.