Missing image

SVG Stack

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


0 ratings

Instant download.
Requires: Stacks v3.5 or greater.
Version : 1.0.5
Released: 3/3/2018
Last Updated : 31/5/2018

Stack Info

Overview

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).

Settings

In this section, we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
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.

Edit Mode

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Dropping an SVG stack into the page, we just display a placeholder sag image until yo link to your own remote sag or raster image file in the stacks settings.

Stacks Image 771
FAQ

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Internet Explorer, old, no longer supported versions 8 and below do not support the use of SVG images.

Known compatibility issues

No known issues.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Please note: If you browser offers you a choice of downloading a .zip or a .stack file, always choose .zip, else the downloaded stack will be corrupted.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Live Demo

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

SVG

Missing image

SVG @ creation size.

PNG

Stacks Image 1453

PNG @ creation size.

Missing image

SVG @ 2x creation size.

Stacks Image 1409

PNG @ 2x creation size.

Missing image

SVG scaled down to 32px

Stacks Image 1424

PNG scaled down to 32px

Note how when the SVG image is scaled up it retains every detail perfectly at any screen resolution, while the regular raster image on the right becomes degraded. This effect only becomes worse as the scaling factors get larger. You could scale the SVG on the left to any size and it will always retain crisp clean lines.

Image

Quick Fact : Unfortunately the only way to add an SVG image to your page without a third party stack, is with the raw xml code from within the svg image its self. This code can be manipulated in your code editor to make the image responsive, and then you'd paste that code into an html stack. This stack takes that pain away, by allowing you to simply upload your svg image to your server or any other online repository, and then link to the url of your svg from within the stack.

New: Version 1.0.2

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

Missing image
Missing image
Missing image

Buy Now

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Missing image
SVG Stack

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™