The problem with SVG is that it was way-ahead of its time! Despite being invented in the late 90's, it faced fierce competition from Flash. Web browser developers were very slow to adopt support for SVG and often SVG could only be produced from grossly-complicated, expensive, high-end software. But fast-forward almost two decades and SVG is suddenly one of the most useful image file formats in existence. SVG solves nearly all the problems designers and developers face daily when using conventional image formats. With the demise of Flash and mobile compatibility becoming a significant factor, SVG is now a highly desirable format to use for almost any vector graphics.

GraphicStack lets you link directly to SVG files stored in a warehouse location. It embeds these files into your page using the correct (recommended) HTML5 markup. You can set an SVG file as a link to another page, a RapidWeaver resource or an external website. Furthermore the GraphicStack can help you set the optimal sizing of your SVG files and control their alignment. Built-in placement options permit you to embed your SVG files directly into theme ExtraContent or FreeStyle banner containers. And of course, everything is mobile responsive and retina display optimised from the outset. This stack has no dependencies on PHP or Javascript.

Why did we not call this the 'SVG Stack' or similar? Simply because alongside of its primary role in supporting SVG files, the GraphicStack is also perfect for conventional image files; like JPG, PNG and GIF graphics. It's one stack that can handle the embedding of nearly all your images!

Example

A GraphicStack is used below to present an SVG of the world. You should find that when you resize your web browser, the image scales to any size and does not become distorted or loose any clarity:
 
World Map
 
(SVG image courtesy of Wikipedia Commons)

Setup

Follow these instructions for getting GraphicStack setup and working in your website
  1. Once downloaded and installed into RapidWeaver, open your stack library and drag-and-drop a copy of GraphicStack into your stacks page
  2. Click the SVG Link button to set the link to your SVG image file
  3. Provide some ALT text to act as a description about the image (for the benefit of visually impaired users with a screen reader, unable to view your images)
  4. Adjust any of the other GraphicStack settings like placement, sizing, alignment and links as required
  5. Preview the page in RapidWeaver to see what the SVG looks like. Publish the page when done.

Remember that as well as SVG files, GraphicStack can confidently handle regular PNG, JPG and GIF images too! The same instructions (as above) are applicable for other image file formats. It is wise to try and keep all image files less than 300KB in size, to keep pages loading quickly and to avoid memory issues on less powerful handheld devices.

Warehousing versus local images

The option is provided to source images either from an online location (or RapidWeaver resources) or from images dragged and dropped directly into the page. Images added directly to a project file will cause the size of your project file to grow - which will eventually lead to extended saving and publishing times. In instances where you intend to use lots of images, it's best to use the warehousing technique to outsource the storage of your images.

SVG files downloading instead of rending in the browser?

This is most likely the result of your web hosting company having incorrect MIME types setup for SVG files. Therefore the web browser is being sent instructions to download SVG files instead of displaying them within the page. It is best to contact your web hosting company and ask them to carefully check everything is configured properly for SVG files.

Embedding graphics into other parts of the page

Using the Placement dropdown menu, you can opt to embed the contents of your GraphicStack directly into a theme FreeStyle banner container or into any theme ExtraContent container. If using the ExtraContent option, you enter a number in the box shown, to target the desired ExtraContent container within the webpage. Placement options replace the need to use ExtraContent and FreeStyle stacks.

Compatibility

GraphicStack is compatible with all major desktop and mobile web browsers as far back as IE9. Please note that IE8 did not support SVG graphics and Microsoft has since dropped support for IE8. For older web browsers you might still be supporting, it's wise to use the free Conditionals stack to hide GraphicStack and replace it with something else.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.