Read more: Vector graphics tutorial
Spark now supports Scalable Vector Graphics (SVG) via the imageResource
Spark - SVG Support
- URL to the SVG image
- desired aspect width, or native size if omitted.
- desired aspect height, or native size if omitted.
- desired horizontal scale factor.
- desired vertical scale factor.
properties define the maximum-height aspect fit for the SVG image
properties act as scling values for the Horizontal and Vertical dimensions of the source SVG image.
NOTE: Scaling values take precedence over width and height values, if both are passed to imageResource
supports SVG images - the resulting images is rasterized
to a bitmap at creation.
The resulting "bitmap" will stretch
if scaled, in the same way as PNG or JPG resources.
tell the SVG rasterizer
the desired scale within which to fit the
SVG image being loaded.
Spark has the following support for Scalable Vector Graphics (SVG):
- bezier curves etc
NOT CURRENTLY SUPPORTED
- Embedded 'image' data (base64)
capabilities.graphics.svg = 1
capabilities.graphics.svg = 2
Capability includes loading SVG files only.
Capability includes inline SVG and SVG files.
The following code shows how to test the supported capability of SVG in Spark releases.
if( scene.capabilities == undefined ||
scene.capabilities.graphics == undefined ||
scene.capabilities.graphics.svg == undefined)
console.log("Oh NO ... SVG is not supported in this build.");
if(scene.capabilities.graphics.svg == 2) /// INLINE SVG is supported
console.log("Yay ... SVG is supported - including 'INLINE SVG' in this build.");
A major benefit of SVG images is that they are resolution independent. Unlike file types such as JPG or PNG, SVGs maintain the same quality no matter what screen resolution
or size they are being drawn at. On a retina display, for instance, a JPG/PNG might stretched if it’s not large enough, an SVG will still look high-quality.
SVGs can result in smaller file sizes than other file types when optimized/minimized properly. This can be helpful when dealing with higher resolution screens, since SVGs don’t need to be created at larger sizes to accommodate the difference like raster images do.
If you are using SVG files on your website, smaller file sizes mean your images will load faster.
SVG files are unique in that they can be edited in graphic editing programs (such as Adobe Illustrator, Inkscape or Sketch) like other images,
but also in a text editor where the markup can be adjusted directly.
File sizes for SVG can be significantly smaller ...
Filesize: 4 KB
Dimensions: N x N
Filesize: 29 KB
Dimensions: 512 x 512
Image place can be easily created using stylish linear gradients to imporve the visual appeal...
Filesize: 12 KB
Dimensions: N x N
In this case the "Sample Text" is an SVG file of 12 KB - and does not require the overhead of a TrueType font file, and associated resources to render at any resolution.
NOTE: The TTF file for the above font is 42 KB.
SVG Essentials - Shapes
Below are some useful essential SVG shapes, demonstrating both linear