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.
User Settings
A comprehensive overview of this stacks user settings.
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.
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.
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.
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.
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.
Select how you'd like the image to align in it's parent container at various screen sizes.
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.
Last modified %(last_mod)%