SVG and Vector support in Lightwell
#LightwellinAction highlights our newest features monthly 🥳
There have been a lot of features in development this month, particularly in the Lightwell canvas — the main screen where layer and animation editing takes place. 🖼 ️ In our last update, we introduced the ability to create custom shapes in the canvas. We’re taking that one step further in the latest version with the ability to import SVGs into your app.
We are thrilled to bring this feature to you, and even more excited to see what you do with it! This post is going to talk about how SVGs are special and how we built support for them.
But first, what are SVGs?
SVGs (or Scalable Vector Graphics) are a type of vector image. It’s a completely different format from commonly used images formats like png, jpeg, psd, and gif. Those are all known as raster images. To explain how vector based images work, let’s first explain raster images.
Raster Based Images
Raster images are the most common image format. These images store a rectangular grid of pixels and consist of a fixed set of dots. Each pixel stores a number for how much red, green, blue and in some cases alpha (transparency) are in that pixel.
A raster is a grid of x and y coordinates on a display space.
The largest downside for raster images is that as you make your images larger, more pixels are required to make the image look sharp. The more pixels that are added, the larger the image file is.
Vector Based Images
Vector based images like SVGs don’t store information about each individual pixel. They store information about the shapes that make up the image. For each shape, the SVG stores a color (known as the fill), a border (known as the stroke), how wide the border should be, and much more* to customize your shape in many different ways.
*SVGs are XML-based vector image format for 2D graphics with support for interactivity and animation. In short, there are a lot of advantages of SVG: scalability, SEO friendly, editing ability, and resolution independence.
Even though SVGs are made of simple shapes, you can put them together in impressive ways. See below! 🤩
Why use SVGs?
Scalable: It can be any size you want
One of the biggest benefits for using vector based images is that you can resize the image to any size you need. Curves are still smooth and details are still preserved no matter how large you make your images.
When developing mobile apps, you normally need differently sized images for different device screen sizes. For each image, you need multiple copies — one for iPhone, one for iPad, and another one for iPad Retina. Also don’t forget the Super Retina iPhone X, Xr and Xs.
With an SVG, you only need one image to support all of these different device sizes. Your existing SVG will even look great on large screen TVs.
Lightwell makes it easy to mix and match multiple types of images, SVG, PNG and JPEG, right in your app.
Size: Good things come in small packages 📦
SVGs files tend to be much smaller than PNGs and JPEGs files because they don’t store information for each and every pixel in an image.
Unlike bitmap image formats such as JPEG or PNG, SVG does not consist of a fixed set of dots, but of shapes and their attributes, so it can be saved as the smallest size possible.
More digital products are being designed with vector images
More and more creative tools now let you to design for web and mobile using vector images. In a world where we no longer design for just one screen size, using resizable assets is super useful.
With the latest version of Lightwell, you can build an app using vector assets. If you want to change the size of an image, you can resize the vector image right on the Lightwell canvas and it’s production ready.
While SVGs are not perfect for every single situation (ie. photographs or hand painted textures and backgrounds), being able to use SVGs directly in your app is a powerful tool. Lightwell makes it easy to mix and match multiple types of images, SVG, PNG and JPEG, right in your app. The less time you spend converting between image formats, the more time you have to build the best interactive app experience possible. 🤓
How we built SVG support
While building out support for SVGs in Lightwell, we wanted SVGs to be handled the same way PNGs and JPEGs are in the tool. Even though these two types of images are handled very differently on the backend, we wanted you to be able to interact with them in the same way.
Our rendering process ensures that no matter what size your SVG is, it will always appear sharp and crisp.
There and back again, a Pixel’s Tale
The screen on your device is essentially a grid of pixels. With PNGs and JPEGs, this is an easy process. We take the pixels stored in the images and display them on the screen. However, SVGs don’t store pixels inside them so we needed to develop a method to convert the shape information to pixels.
Without Lightwell, you’d likely build your app with UIKit in Xcode, but UIKit does not support SVGs. That means that they take all your vector images and convert them to PNGs before the app runs. If you were to size your images up while running your app, they would appear fuzzy or pixelated.
In Lightwell, we take SVGs and convert them into shapes that are stored on the GPU (Graphics Processing Unit) while your app is running. As your image sizes up or down, we change the size of the shapes dynamically. After these shapes are the correct size, the GPU will convert them to pixels to be shown on the screen. Our rendering process ensures that no matter what size your SVG is, it will always appear sharp and crisp.
While rendering SVGs takes more computing time than it would take with a PNG or JPEG, we have created optimizations to make it as fast as possible.
Certainly over time we’ll work to make it even faster! This is our first version of SVG rendering in Lightwell, so there are still some features that we don’t support just yet. 🔜
SVG support #ComingSoon
- Gradients
- Dashes
- Text
- Masks
- Rasterized images embedded in SVGs
- CSS styled SVGs
Importing SVGs in Lightwell
In Lightwell, you can now use SVGs the exact same way as you have been using PNG and JPEG images previously.
Drag and drop your SVG onto the Lightwell canvas.
And you’re done! Your SVG has been added to your project and is ready to use.
If you haven’t done so already, download a Free Trial of Lightwell and try it out today! We’d love to hear what you think.
