Thought I'd give an overview of some of the benefits and features of the SVG image format, used for the
Distance OT I posted today, which features lossless animation (apart from Internet Explorer/Edge) and mobile/desktop widths and brings a number of new things to the table for OT creation.
Typically online SVGs are seen used solely for vector website icons and logos though their flexibility extends considerably past that. Anything from video to entire web pages can be contained within them.
When SVGs are embedded on sites within an img element (how we embed images on this forum) certain things become unsupported however such as anything dynamic and/or externallly referenced (embedded links, Javascript, video, iframes, GIFs and external images are all disabled). Despite this it still supports an array of useful features. Of the more relevant for thread creation purposes these include:
- CSS and SMIL (native SVG) animation. This can be used for either vector/element animation or raster sprites.
- Raster image (JPEG/static GIF/PNG) and vector image embedding support, the former using via base64 encoded data URIs.
- CSS media query support for alternate mobile/desktop widths.
- The ability to use JPEG images with alpha transparency instead of PNG, by using one image as the base and another as the mask, for greater filesize savings compared to large PNGs.
- Native text elements and embeddable fonts.
- Can use both SVG and HTML elements.
In general these also can all contribute to filesize savings, especially for larger designs which would otherwise be a single raster PNG or JPEG. The entire Distance OT for example is 2.3MB, which is barely the size of many reaction GIFs.
Practically this opens up a lot of new possibilities, obviously, though it's not without some key downsides:
- Familiarity with CSS and HTML.
- If aiming for more complete cross-browser accuracy requires more testing, along with butting against the various quirks each browser has. Eg: IE/Edge doesn't support CSS/SMIL based animation or transforms at all apart from extremely basic properties like 'visibility'.
- Additional time to create compared to outputting a static image from an image editor.
- Fewer available image hosts for hotlinking.
- Not a replacement for long GIFs based on video/footage (native Mp4/WebM embedding support RE, pretty please).
- Overall the images are still scaled down/up like regular images, so despite CSS/HTML support it's unlike a changing a viewport width with regular web pages since everything is inherently being scaled smaller/larger.
So that should give some basic idea of the format. Maybe not for everyone but it's a solid alternative to have. Among other more general uses I've experimented with for example are animated lossless screenshot comparisons, which in the past have sometimes been posted as limited palette GIFs.
