Exporting a Better SVG
SVG stands for Scalable Vector Graphics which are graphics that, as the name suggests, are scalable and therefore they look nice and crisp at every size and pixel density. Unlike normal image file types like JPG, PNG or GIFs, SVGs aren’t really graphics—they’re actually XML code! This allows SVGs to be easily manipulated and animated with CSS. Additionally, any live text within an SVG document is even searchable and indexable.
SVG Creation is a Multi-Phase Process
Much like a website, SVG creation usually involves a design phase and a development phase. Vector artwork is initially created in vector graphic editing software like Adobe Illustrator. In most instances, this means you’ll have designers tasked with creating artwork who may not necessarily know how to code. With SVGs, how the designer creates and sets up the artwork will directly impact the resulting code a developer will be working with. And, to put it nicely, things can get a little wonky. This article will cover some quick basic tips to help designers create cleaner SVG code.
Design File Preparation Tips/Considerations
A designer really shouldn’t worry about how their vector masterpieces will get translated into XML code, right? However, after the creative approval process dust has settled, it’s time to prep those design files to become the best possible SVG files they can be before passing them off to the developer. Here are a few things to consider:
1) Artboard/Bounding Box
It’s best practice to have the artboard as snug around the artwork as possible. Having any amount of negative space or padding around your artwork will make it harder to size and animate later. SVGs don’t discriminate—they’ll treat that grand canyon of dead space in your file just like everything else and render it in the code.
2) Outline the Fonts?
It depends. In some cases you will be better off outlining your fonts, especially in cases of highly stylized or custom fonts such as those found in logos. Other instances of text – for example, labels on an interactive map – you may want to keep as live text to later be styled or hidden with CSS. This will also help keep your SVG file size down.
3) Dimensions of the Artwork
Even though SVGs are scalable, you’ll want to make sure that the pixel dimensions of your artwork are set to an even number. This will make things easier for the developer when it comes time to do the math for scaling.
4) Layer Nesting and Naming
This is a biggy, as what you name your layers in Illustrator or Sketch will end up as IDs on groups in the code. Layer nesting and naming will allow the developer to easily target different elements or entire groups of elements in the design to style and animate with CSS. Going back to the interactive map example, if you had a collection of states that all needed to be the same color, you’d want to group those together. This would allow the developer to target just one ID to change the color of all those states on a mouse hover.
Exporting an SVG
Below is an example of ideal Adobe Illustrator export settings when exporting an SVG for the web:
Keeping Developer Involvement to a Minimum
Once the SVG is handed off to a developer, the code will often be further altered as needed. This may include adding in more classes and IDs or wrapping elements in anchor tags before ultimately embedding the SVG on the website.
(For information on embedding your SVGs with Javascript please refer to the article below:
https://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg )
When the designer follows these 4 steps, the entire process becomes much more maintainable. This will save valuable time in the likely event of client changes to the artwork by preventing that work from needing to be redone.
Other Texas Creative Blog Posts
Avoiding a Fontastrophe: Why You Should Never Ask Your Agency to Send Fonts to You
Converting spot color to process color in Illustrator or InDesign (You’re probably doing it wrong)