Stacks Image 106

SVG Stack

Warehoused SVG (and regular images) with all the features of a pro image stack.

Description

SVG stands for Scalable Vector Graphics.

Advantages of using SVG over other image formats (like JPEG and GIF) are:

  • SVG images are scalable
  • SVG images can be printed with high quality at any resolution
  • SVG images are zoomable (and the image can be zoomed without degradation)
  • SVG is an open standard
  • SVG files are pure XML

SVG images can be created in many graphics applications. Adobe Illustrator, Sketch, Inkscape, Draw, to name but a few.

The primary reason we use an SVG over a regular image format in our projects is it's ability to scale without any compromise in quality, over a regular image format like png, or jpg, which are raster images and do not scale without visible degradation.

Quick Fact : While this stack was designed with users wishing to work SVG images in mind, it works equally as well with any regular type of image you'd like to include from a remote source like your server. (Commonly referred to as warehousing).

Demo

New: Version 1.0.2

Added ability to choose a rollover SVG / image to display on mouseover.

Note just how crisp and clean SVG images are at any scale, compared to a normal raster based image like a JPG.

Missing image

User Settings

A comprehensive overview of this stacks user settings.

SVG Image

This is where you add your own remote image file.
Clicking "set link" will open RW's built in links panel.
Here you select "url" for the type (default).
Now add the url of your remote image.
This is the web address of your image which must be published somewhere on the internet, normally just sitting on your server somewhere.

Alternate Text

This is the text that a visually impaired person will hear read out to them, as a page reader reads through the page, and encounters your image.

On Click

Here you can select "do nothing".
Or
Link to another URL.
You can add a URL to direct the user to when the image is clicked.

On Hover

Here you can select "do nothing".
Or
Show an alternate sag / image.
You can add a URL linking to the sag / image to be displayed when the user hovers over the image.

Max Width

If your image is larger than you'd like, you can choose to constrain its size.
You have options to constrain to different sizes at different screen sizes.

Alignment Buttons

Select how you'd like the image to align in it's parent container at various screen sizes.

Breakpoints

By default standard breakpoints are selected.
The breakpoints are what define what constitutes as a tablet and mobile screen size (the points at which the settings like alignment take effect.
You can choose to define your own custom breakpoints if you wish.

Made in England © 2023 Doobox Software
Mastodon - Twitter - Company - Subscribe - Cartloom - Branding - Contact Us

Last modified %(last_mod)%

SVG Stack