Working with SVG Images

The SVG Image widget lets you work with SVG vector graphic images. The .svg image file must be present in your project before you can use it in your screens.

SVG images can be resized, rotated, and flipped horizontally and vertically.

SVG images are the ideal choice for custom clipart and new widgets. Try using ClipSafari.com to find royalty free clipart for your wireframes. SVG images can also be used for custom icons.

Unlike raster images, SVG images inherit the current theme used by the screen. If the screen is using sketchy style then SVG images will be sketchy too. There is also a limited control over colors. If the original SVG image is black & white then you’ll be able to change these colors in Properties View. To increase possible uses, SVG images can be rotated, flipped horizontally and vertically.

To use an SVG image you can:

Advanced Uses

By default SVG images are scaled as specified by the SVG standard. In particular this means that the stroke width is scaled too. WireframeSketcher has a few proprietary tricks that you can use for more control over the rendering and layout. The .svg file can include the ws-layout attribute in <svg> tag:

<svg
   ...
   ws-layout="non-scaling-stroke">

If you are using Inkscape editor then you can add this attribute using Edit > XML Editor. Inkscape will preserve it.

The non-scaling-stroke value ensures that the stroke width does not scale. There are some other values that you can use for different scaling strategies. Here’s what you need to do to get 9-slice scaling, a popular scaling method in Adobe tools:

<svg
   ...
   ws-layout="scale-9">
   ...
       <rect
            id="ws-guides"
            width="33"
            height="7"
            x="26"
            y="16"/>
   ...

Note the scale-9 attribute and also the extra element with id ws-guides that is used to define a 3×3 scaling grid (this element is not rendered). 9-slice scaling strategy only resizes the middle band without distorting corners.

In Inkscape editor use Object > Object Properties to define a custom id for an element.

There are some other less important scaling strategies. scale-3-h and scale-3-v are basically scale-9, but only on horizontal or vertical axis. The other axis gets non-scaling-stroke scaling. Then there is a more advanced scale-25 strategy that works with ws-guides-1 and ws-guides-2 elements to define a 5×5 grid. It’s similar to scale-9 but you get an additional middle band that does not scale.

All these scaling strategies keep the stroke width constant and don’t scale it.

If this is not enough then it’s also possible to use embedded JavaScript with onresize event to control SVG scaling programmatically. More than that, many widgets support Skin property that can be specified by editing screen XML file and adding a skin attribute that points to .svg file. With this approach you can create you own stencils with custom widgets that behave like any other built-in widget. See skinning widgets documentation for more details.

You can see some concrete examples of custom widgets in Shapes and iPad stencils.

When creating SVG images that need more precision make sure to snap coordinates and sizes to integer values. Here’s a template .svg file that you can use with Inkscape. It defines a 1×1px grid for automatic snapping.

Note that WireframeSketcher has a limited support for gradients and will approximate them with solid colors.


Next: Working with Icons