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!
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:(SVG image courtesy of Wikipedia Commons)
Setup
Follow these instructions for getting GraphicStack setup and working in your website- Once downloaded and installed into RapidWeaver, open your stack library and drag-and-drop a copy of GraphicStack into your stacks page
- Click the SVG Link button to set the link to your SVG image file
- 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)
- Adjust any of the other GraphicStack settings like placement, sizing, alignment and links as required
- 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.