Review: WebCode – A Better Way to Make SVGs?

Working with SVG over the past year, I’ve sometimes felt like there are two different kinds of SVG.

The ‘Save As..’ SVG

These ‘Save as’ SVGs are tangled, needlessly complicated files commonly spat out of a range of vector editing apps. They’re riddled with bad markup practices and meaningless app-specific code.

These files are to SVG, what MS Word is to HTML.

Sure, they’ll probably render ok in a modern browser, but the underlying code is deeply ugly and difficult to manipulate outside of the editor that created it.

The ‘Hand-cut’ SVG

This other type of SVG is a simpler, well-organised, often hand-edited file. You’ll know these files when you come across them, because when you browse them in a text editor, they make as much sense as any well-written HTML file.

It’s this clarity that really unlocks the flexibility of SVG on the web, so turning the first type of SVG into the second type is a super-valuable move.

WebCode from PixelCut is a different kind of vector graphics apps — an app that constructs SVGs from bare bones — not as an afterthought.

Just to be clear, WebCode is OSX only — but I’m always on the lookout for cross-platform equivalents.

So, let’s have a look at the WebCode interface.

The Grand Tour

The Drawing Tools

WebCode’s drawing tools are relatively spartan — especially compared to Illustrator or Inkscape — but this isn’t a bad thing.

Firstly, these tools are conceived to write good SVG, so you’ll begin to instinctively understand the things that SVG is good at. You also come to understand what it’s not good at, and start to avoid doing those things.

Note that WebCode does also have an IMPORT command that is useful for bringing in smaller SVG components made in Illustrator or Inkscape.

Shape and Groups

The ‘Shape and Groups’ panel is the heart of WebCode.

In some ways, it looks a lot like the typical ‘Layers’ panel in any graphics app, and certainly works similarly. You can drag layers up and down, and group and ungroup components with ease.

There is an ‘eye’ icon to the far right of each layer. Switching off this icon off not only hides that object on the pasteboard, but also temporarily removes it from SVG code preview below — this is really handy for copying SVG components into other documents.

Selecting any element in the Shapes and Groups panel automatically loads it into a properties panel below (2).

This lets you edit each SVG element at the properties level. This includes:

• Giving it an ID
• Scaling it
• X/Y position
• Color fills
• Stroke types
• Opacity
• Stroke colors
• Shadows

Resources Palette

Reusing assets is not only good coding practice, but it makes good sense from a design perspective as well, reducing visual clutter and file size.

The entire right-hand side of WebCode is dedicated to the four reusable assets within a WebCode SVG.

These are:

• Colors
• Gradients
• Shadows
• Images

Every new color, gradient, image or shadow that you create in the ‘Shape and Groups’ panel, automatically gets added to these asset panels. They can be re-applied to other elements with a single click.

This keeps you constantly conscious of the assets you have, and encourages you to reuse and simplify your palettes.

This is very useful when working with SVG.

Export Formats

PixelCut — the makers of WebCode — also make PaintCode, a tool for making graphics for OSX/IOS apps. In other words, they’re well-versed in the idea of making different assets for different environments.

One of the realities of working with SVG, is you are going to need to have fallbacks in place.

WebCode can automatically produce PNGS, TIFFs and PDFs to accompany your SVG files.

Interestingly, with a flip of a dropdown, WebCode can just as easily produce web-ready HTML & CSS renderings or Canvas/JavaScript ready graphics.

Issues and Caveats

WebCode isn’t without it’s problems. There are two areas I think could be improved in future editions.

The SVG Code Window

For an app that put so much welcome emphasis on the SVG code, the tiny SVG code window at the bottom is a frustration. Perhaps this is to discourage people from thinking they can directly edit their SVG markup here? I’m not sure.

This window lets you view and copy code sections directly, but currently can’t be resized at all — let alone kicked out into a ‘Web Inspector-like’ floating window, as I’d like to.

This is the first thing I’d change.

UPDATE: 27 March: The PixelCut guys reached out over twitter to tell me you CAN, in fact, drag the the top of the code preview window to resize it.

The current issue is your cursor indicates the panels are horizontally resizable, but doesn’t change to the re-sizing cursor when hover over the top edge of the code preview.

I’m told this will corrected shortly.

No PATTERN and USE Support

As front-end people, we intuitively understand the value in declaring a class once, and then calling upon that class again and again inside our documents.

In fact, most of us feel dirty using a single-use inline style.

The SVG spec offers a similarly powerful ability with graphical elements.

At the top of your SVG document, you can place a definitions block (<DEFS>), which works a little like a STYLE block does in HTML.

Chunks of SVG declared within that DEFS block, are each given an ID, and can then be referenced again from anywhere within that SVG — with a single line.

The USE element is ideal for icons and other reusable components. The PATTERN element allows you to tile sections of SVG with other bits of SVG.

These are both powerful and efficient functions, and are very intuitive ways to work if you’re ingrained in CSS workflows.

Unfortunately, at the moment, WebCode doesn’t work with either USE or PATTERN.

I’ve got my fingers crossed for future releases.

The Wash-up

I think the concepts behind WebCode are a fundamental improvement on the ways we’ve developed SVG before.

In traditional vector editing apps, it’s very hard to keep control of what is happening with your code ‘behind the wizard’s curtain’. Often what SHOULD be a simple SVG rectangle somehow gets converted to a more complicated PATH shape.

An app that keeps the SVG markup right in front of your nose — even if the window is small) — just feels right for working with these files.

While there are a few weak spots (as noted above), I think the array of tricks this app already has, justifies the sticker price.

At $US50, I think it’s a worthwhile investment for anyone interested in seriously working with SVG.

Check it out.