What are the benefits SVG image format and differences between image export options from Sketch app, lightweight inspecting tools, and Avocode.

Challenges with SVG export

With the rise of Retina and other high-res displays, SVGs became very popular on the web. Unlike bitmap images, SVGs are full descriptions of what is inside and contain all information about each shape included and everything like colors, dimensions, or tangent coordinates can be edited in code. This results in an indefinitely scalable and extremely lightweight data format — perfect for the web.

Though Adobe Illustrator is probably the most profound vector editing tool, most UI design nowadays happens in Sketch. Sketch keeps all information about design layers, each in their own data format which is quite different from the SVG XML open standard data format.

The exporting process is, therefore, a mere translation of data, which is obviously limited by the options of the Sketch data format.

For example, let’s say you draw a simple circle vector shape. In Sketch you can add three types of stroke (or border if you will): Outside, Inside, and Center. However, SVG data format has a representation only for the Center border.

How can I make sure my SVG always looks good?

You can surely export assets directly from Sketch. However some layer effects might be missing or broken. Also, the exported SVG won’t be optimized for the web.

You could also use some lightweight inspecting tools like inVision, Sympli or Zeplin, but they can only export what Sketch exports. Since they cannot parse and render the whole design file — they only upload layers which are set as Exportables, plus a screenshot of the designs, and metadata about bounds and text layer content.

In other words, their plugin pre-exports all selected assets from Sketch, so you could export them again using some of these tools.

We’d like to offer another option — custom SVG export optimized for the web based on Avocode design rendering. When it comes to Photoshop or Sketch, we upload the whole design file, parse it, and render it again. This process gives you precision and freedom to do things like:

• export any layer — no matter if it was pre-set as Exportable or not
• change images format (to PNG, JPEG, SVG, or WebP) for any exported layer
• rename exported images
• hide layers and export slices of the design
• scale vector shapes and export them as bitmaps in higher resolutions
• select multiple layers and export them at once separately or as one image
• export multiple formats and resolutions of a layer at once
• select multiple layers at once and measure distances between the selection and other layers, and more

Now, let’s have a look at four tricky SVG export examples to explain why we believe it’s important to render the layers first and then export them as precisely as possible.

1) Shadows on a circular shape

Sketch uses dilation morphology, and therefore shadows on circular shapes are not perfectly circular, its geometry becomes slightly rectangular.

We chose a different approach. First, we duplicate the circle. Then we add a stroke to the circle below and set its color to be same as the one of the drop shadow. Then we blur this stroke just about right and voilà — there is your circular shape with a drop shadow.

2) Inside and Outside Border on a vector shape

As mentioned above SVG can represent only a Center stroke. If your shape has either an Inside or Outside stroke, the exporter has to fake it somehow.

Sketch app export moves the Center stroke vector path so it looks like an Inside stroke. When it comes to rounded shapes (mostly bezier curves), Sketch has to create a different amount of points than the curve had previously. However, this technique has a few side effects:

• much bigger file size
• change of the previous path (which is a problem if you want to manipulate the shape on a web page later with JavaScript)
• change of the shape geometry confuses some layer effects like stroke and creates unwanted gaps on the border line

Zeplin and other lightweight inspecting tools which re-export Sketch export, end up either with the same result or sometimes even less. For example, when you set multiple layers as an exportable, Zeplin can export them only one by one. When these layers intersect, you end up with seeing only one layer.

Avocode first renders the layers with Inside border. The SVG Exporter changes the Inner border to Center stroke, doubles its width and then cuts out the outside part of the stroke by using a mask.

3) Shadow on a line path

Sketch is not able export shadows on line curves to date. If you create a line with an Arrow or Line tool, a drop shadow will not be exported at all. If you create a line with the Pen tool as a vector path, drop shadow will be applied as if the path was closed.

Zeplin re-exports assets exported by Sketch, so it exports the layer with no effect too, plus since it cannot export multiple layers in one SVG, you’ll end up only with one curve.

Avocode first detects if the line path is closed or not. If the line is open, the SVG exporter doesn’t apply color fill and applies the shadow only on the line.

4) Angular gradient

Both Photoshop and Sketch cannot export a radial gradient on a vector shape to SVG. Probably because there is no general representation of an Angular gradient in the SVG format, the calculation takes quite long, or the exported file is large. We know this is not a frequently used effect, but we wanted to build an SVG exporter which would allow exporting without limitations.

This is how we export Angular gradient: first, we slice the bounding box of the vector shape. Think of it as 360 tiny slices of pizza. We assign each of these slices a different angle and then calculate its color. Once this is done, we apply a layer mask to give the bounding box a shape of the original vector shape.

We keep improving our rendering engine and soon we’ll launch a new version of our design stage, which will also render some tricky blending modes and more.

And what about SVG optimization for the web?

First, Avocode sends the data information from its design format to an SVG Exporter (technology built on SVG.js) which generates XML data in the SVG format. Then it runs the SVG through SVGo image optimizer which gets rid of all unnecessary metadata and makes the file smaller.

In Avocode you can export layers together or separately, rename image assets, change resolution, image format and add variants.

If you’d like to try our new SVG export and compare the image quality on your own, here is a 14-day free trial for our app.

We’d love to know how it works for you so that we can make it even better. Let us know in the comments how do you export SVGs for the web and why. 🙏🏼

Avocode is a design hand-off and inspect tool for teams which are building next-generation Web, iOS, & Android projects.