Applying SVG filters to artwork in Vectornation by Zaweba

SVG is the format the web uses for vector graphics, and it has its own system of filters for effects such as blurs, shadows, textures and lighting. Vectornation by Zaweba gives you access to these through Effect > SVG filters, which offers a set of built-in filters and also lets you bring in filters from SVG files you already have.

For anyone making graphics that will live on a web page, this is a useful bridge between the drawing app and the browser.

Applying a built-in filter

Select the artwork, open Effect > SVG filters and choose one of the built-in filters. The filter is applied as an effect, like the other entries in the Effect menu, so the shape itself does not change and you can remove or swap the filter later.

Try a few on a simple shape first. SVG filters vary a great deal in strength, and some that look subtle on a large area can overwhelm a small icon.

Importing filters from SVG files

If you or a developer you work with has written an SVG filter, perhaps for a website, you can import it from an SVG file and use it in Vectornation. This keeps your artwork in step with what the site already uses. It also means a filter worked out once can be reused across many pieces of artwork without anyone having to recreate it by eye.

Keep imported filters in a folder you know, alongside the project they belong to, so you can find them again on another job.

Where SVG filters make most sense

The obvious home for SVG filters is artwork that will be exported as SVG for a website or app. Because the filter is part of the SVG standard, it can travel with the graphic rather than being turned into pixels. That keeps file sizes small and the graphic sharp at any size on screen.

For print, other effects in Vectornation are usually a better fit, since print output will render effects to pixels at the document raster effects resolution anyway. SVG filters still work there, but the advantage of keeping them as SVG is mainly on the web.

Working with developers

If you hand graphics to a developer, tell them which pieces use SVG filters. Filters can be slower to draw than plain shapes in a browser, especially on large areas or in animations, and a developer may want to know where they are. Keeping filters to the elements that need them, rather than whole backgrounds, makes life easier for everyone.

It also helps to name your layers and objects clearly. A clearly named layer with a filter applied is easy for someone else to find in the exported file.

Combining with other effects

SVG filters stack with the rest of the effects in Vectornation. You can, for example, apply a transform with copies and then an SVG filter over the result. As with any stack, order matters, and it is worth checking the result at the size it will finally be shown.

Not every program that opens SVG files handles every filter in the same way, so if a graphic is going somewhere other than a web browser, check it in the place it will be used. For artwork that must look identical everywhere, test it in each place before you rely on it.

SVG filters are a specialist tool, but for web graphics they are a natural fit. Having them in the same Effect menu as everything else in Vectornation means you do not need a separate tool to use them.