Design & UX
By Alex Walker

Review: WebCode – A Better Way to Make SVGs?

By Alex Walker

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

The ‘Save As..’ SVG

'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 WebCode Interface

The Drawing Tools

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

The WebCode Tools

The WebCode Toolbar

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 Shapes & Groups Panel

The Shapes & Groups Panel

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

The Resources Panel

The Resources Panel

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

Export options for WebCode

WebCode provides fallback PNGS,
TIFFs and PDFs

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.

Dropdown: SVG/Canvas or HTML.

Choose your poison: SVG, Canvas or HTML.

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

WebCode SVG Preview panel

SVG Preview – ever peeked into a letterbox?

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.

Animation showing the  cursor issue

Cursor indicates horizontal resizing but not vertical.

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.

  • Fede

    The SVG code windows is resizeable, however there isn’t any resize symbol visible.

  • seabee

    Looks nice but ohhh, it’s an app, as in “app”le only. Whatever happened to cross platform? e.g. Linux? Why is the platform restriction not mentioned right at the start? I had assumed it to be a web-app.

    • Alex Walker

      Fair call, Seabee. I’ll edit that in.

    • netsurfer912

      Native apps are usually more responsive, which is essential if you are working on an image for longer than a few moments. The OSX-Only-restriction really destroys the product, though.

  • Hm, I am able to increase the window size for viewing the code fine. I’m on Mac OSX Mavericks. There’s no cursor indicator, but you can click and drag the title bar. Just downloaded the trial. Will check the tool out.

  • Yannis Steriotis

    You are totally wrong about resizing the code window! If you grab and move up / down the menu bar in code window you can resize it as long as you want!

  • Alex Walker

    Yes, PixelCut tweeted to me that it *is* resizable. It seemed crazy that it wouldn’t.

    As a few of you noted already, it’s just that the cursor doesn’t show the resize icon when you hover over it — the does show the resize cursor when resizing the side panels, which is what threw me.

    Anyway, Pixelcut acknowledged it’s a bug and will fix it shortly.

  • Alex Walker

    Yep, noted above.

  • Alex Walker

    Yes, the lack of cursor interaction got me.

    • damerms

      Got me too.

  • Levan Metreveli

    for Windows / Linux / whatever OS / users there is a web based alternative

  • Rosenvinge

    The App Store currently lists this at $39.99 ($10 less than mentioned above). It hasn’t been updated since this article (March 2014).

  • netsurfer912

    $50 and not Linux compatible. Great idea, but not really usable … I’m not gonna install OSX in a VM just for that app.

  • Yalex

    I’d advise against purchasing WebCode for now. It had potential but lack of updates in a year, a major weakness — no group transforms — making it quasi-useless for integration of exported SVGs into other projects, no support group have nipped it in the bud IMO, especially when compared to BohemianCoding’s frequently-updated and oh-so-much-more-powerful Sketch.

Get the latest in Design, once a week, for free.