Feature Request: SVG - Standard Line Sizes

Hi Peter, hope all is well with you these days! We're spinning up a new project, and a couple of us are getting back into using WireframeSketcher again.

I like the new SVG feature, but one thing I would like is for them to be have a uniform line width, so when you size them in a screen, the line width doesn't also scale up and down. That way they look more like all the other assets in the screen.

Maybe it's something to do with SVG itself; that I've chosen line width to scale or something. Not sure.

In either event, I don't see ever needing line width to scale. Maybe optionally, but not typically.

Thanks, and great work! Still lovin this app!

Hi Sean,

I'm glad to see you back! By default SVG images are scaled as specified in the standard. However WireframeSketcher has a few undocumented tricks that you can use. You can modify your SVG file to include the following attribute:

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

It's a non-standard attribute used by WireframeSketcher to achieve exactly the effect you are looking for.

There are some other values that you can use for different scaling strategies. Here 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"/>
   ...

As you can see there is the "ws-layout" attribute and also an extra element with id set to "ws-guides" to define the 3x3 scaling grid (this element is automatically hidden).

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 a "ws-guides-1" and "ws-guides-2" elements to specify a 5x5 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 constant and don't scale it. With the right strategy you can create widgets that look and behave like other builtin widgets. SVGs automatically adapt to Sketchy theme too.

You can see some concrete examples of scaling strategies used in Shapes and iPad Controls stencils.

So this post is basically the first time this feature got documented. Let me know how it works for you!

Wow, that's nice ... couldn't have asked for more than that. Thank you ... this really made my day!