Prototyping using SVG in ProtoShare

So we were researching the other day exactly what we could do in ProtoShare to make better use of the facilities of SVG.  SVG, or Scalable Vector Graphics, is markup based vector graphics support for the web browser that’s supported in every modern browser, IE back to IE9, and Android from version 3 onward.   As we worked on this, we realized that we already have a good amount of support for SVG, and I thought it would be a great time to let you know how to take advantage of SVG in ProtoShare, and why you should.

As far as why you should use SVG, there are many articles you can read to answer this question.  The main thing I like about using SVG’s in prototypes is that it provides you with easy-to-use, completely scalable vector graphics.

We used SVG to create our really useful set of svg-based icons.  Because these are svg, you can scale them to any size without worrying about resolution problems, and, because SVG is markup based and can respond to scripts, you can use ProtoShare’s appearance settings to change their colors, and even add hover and click styles.

ProtoShare Modern UI Icons

ProtoShare Modern UI Icons are Scalable Vector Graphics


You can also use your own SVG images in ProtoShare – just drag and drop them onto the canvas, and they will show up just like any other images.  The added benefit is that you can scale them up or down without any loss in resolution!  Here’s an example with the famous SVG Tiger:

SVG Tiger

SVG Tiger

At any rate, we are looking into adding additional support, so that you can paste and script your own SVG images in ProtoShare.  If you have any thoughts on what you would like to see supported, please let us know!

This entry was posted in ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *