3 surprising things you can do with SVG files in Justinmind

The SVG file format is on the rise in UX design and there’s more to it than meets the eye. Let’s take a look at 3 surprising things you can do with SVG files in Justinmind

While the SVG file format has been on the scene for over 20 years, it is only recently that widespread browser support is catching up and embracing the magic that is the SVG. The magic of this little file lies in the beauty of it being scalable at any size, can be embedded in mobile apps and websites with minimal effort and it never loses an ounce of quality in the process. Not only that but the file sizes also remain relatively low making it a favorite among UX designers.

Let’s take a quick look at the little file format and how to use the SVG file in your interactive wireframes with Justinmind.

What is an SVG file?

SVG stands for Scalable Vector Graphics file. What this means is that these files, with the extension .SVG, use XML-based text format to explain how the image should appear.

The SVG file is used to define vector-based graphics on the internet. These files do not lose any quality when they are zoomed into or resized because they maintain their vector quality at any size, hence scalable. This little feature makes them very UX design friendly because of their widespread compatibility.

The files are adaptable and are frequently used for icons, line graphics and logos. Most UX designers will use the SVG file for images that are used more than once throughout a website or mobile app.

An SVG animation is possible too but we’ll come on to that later.

Use SVG files in your interactive prototypes. Download Justinmind.

Benefits of using SVG files in your interactive wireframes

There are a few advantages to using an SVG file in your interactive wireframes and prototypes. Especially when compared with other image formats like .JPEG or .GIF.

• SVG images can be edited in any text editor
• SVG images can be searched, indexed, scripted and compressed
• SVG images are scalable and don’t lose quality
• SVG images are zoomable
• SVG is open standard

Why use SVG files?

Since SVG files are scalable, this makes them very favored within UX design. This is because of widespread browser support and responsive web design. The SVG file will appear the same, with no quality loss, on all devices.

SVG file sizes are also small. Using an SVG file in your interactive wireframe will take less time to load.

UX designers can modify SVG files. That means you can repurpose the SVG file across multiple locations on a website. What does this mean? It means you can animate the file, should you wish.

How to use SVG files in your interactive wireframes

SVG can boost the user experience design of your websites and mobile apps. They are versatile, modifiable and growing in use. There’s no pixelation with SVGs and even when they’re animated they are small in size.

3 surprising things you can do with SVG files in Justinmind

Using SVG files as background images

In Justinmind, you can add an SVG file to your hi-fi prototype. By importing your SVG files, you can work with the vector files as you would with any other imported image file.

The SVG will be fully integrated into your interactive wireframe and will be updated automatically whenever the remote files are modified in your editor. Not bad! The benefit of using an SVG as your background image is that no matter the screen and no matter the size, your SVG image will look consistent with no quality loss.

To important an SVG file, simply drag an image widget into your canvas, double click it and search for the file. Easy peasy.

Use SVG files with Justinmind’s Sketch integration

If you’re creating UI elements in Sketch, download our plugin and import them. Those icons, boxes and buttons you create can all be easily loaded and used in Justinmind. The integration will speed up the design process, reduce reworks and is a more efficient way to share files, especially if you’re using different design tools.

Find out how to export your Sketch UI assets here.

Because the SVG file is a living thing — that is to say not a photo of a thing like Bitmap which is flattened, it can retain information from Sketch, including layers, making it truly editable.

You can also choose how to view your Sketch design in Justinmind — either as a web, mobile or tablet prototype and any changes to the SVG file can be done directly in Justinmind.

Build hi-fi prototypes with your SVG files. Download Justinmind

Customize your SVG vector files in your interactive wireframes

You can customize the properties of your SVG files in your interactive prototype with Justinmind. You can change the color of your SVG files for added personalization.

All you need to do is add an image widget to your canvas, like in the previous tip. When you’ve uploaded the SVG vector file simply mosey down to the Properties tab. Here you can play with the colors of your file.

And with our Change Style events, you can change the style of your vector with a tap, swipe or click!

And there you have it. 3 very easy ways to use SVG files in your interactive wireframes with Justinmind.