Check out our latest news and articles.

Visit our Blog

Stay sharp — BaseCase Interactive adds SVG support

The BaseCase platform is continuously evolving, through new add-on products, or extra features and upgrades to our core product, BaseCase Interactive. The introduction of SVG support may seem like a minor update, but this post aims to show the major impact it could have on your app design workflow.

SVG stands for scalable vector graphic. Vector graphics are made up of geometric shapes and lines, whereas raster graphics (e.g. JPG, GIF and PNG files) are pixel-based. This means SVGs are scalable to any size without loss of quality, unlike raster images which can easily pixelate.

An SVG image provides much more flexibility than its raster equivalent. Instead of requiring multiple images of varying sizes, you can scale a single SVG as required, keeping your list of assets shorter and easier to manage.

When design specifications change, existing raster images often become unsuitable. An SVG can be resized easily using the BaseCase Editor to meet new layout specifications. Unsuitable raster images, on the other hand, would all need to be resized externally using a raster graphics editor (e.g. Adobe Photoshop), and then reuploaded.

Another benefit of SVGs is that they will adapt automatically to the pixel density of a display. With raster images if you upload a normal sized (1x) image, it will look blurry on high DPI displays. But if you upload a double resolution (2x) image, it will look sub-optimal on low DPI displays. Using SVG images completely eliminates this issue.

To get started using vector graphics, just add your SVG files to the Asset Manager as you would any other image file. You can use SVGs for the image, dynamic image, and image button controls, as well as for video covers, page backgrounds and bullet points in the new Markdown text area.

Consider using SVGs in your next project and experience the benefits first hand.