The name SVG stack is slightly misleading. The stack will also load warehoused jpg, png and gif files and can display an alternate image on hover. The latter function is interesting especially as it allows you to mix formats.
SVG Image – Set Link
Alternate Text – Default 'Missing Image'
On Click – Do Nothing, Link To URL
On Hover – Do nothing, Show Alternate Image
Max Width – Desk, Tablet, Mobile
Position – Left, Centre, Right – Desk, Tablet, Mobile
Breakpoints – Standard, Custom
The fact that SVG has an option to display an alternate image on hover is a neat trick, which many will find useful.
CutOut is a stack that allows your text to gracefully flow around your image instead of the standard rectangular float that we have become used to. Check out the screenshot below:
The left half of the image displays a regular floating image. The right half of the image displays a floating image when using CutOut. Notice a difference?
CutOut makes use of the new 'shape-outside' CSS definition which is supported by all newer browsers (If you wish to know exactly which browsers take a look here). Shape Outside allows a text to flow around a pre-defined form. The form can be circular or polygonal. Polygonal shapes are highly experimental, but 0% 0%, 100% 0%, 50% 100% for instance, will create a triangular shape. CutOut degrades to a regular floating image on older browsers.
You can drop any Square (i.e. with equal length sides) image into CutOut and your image will automatically be displayed as a circular image which your text will flow around. If you require a more complicated shape, you'll need to search the web for shapes, or experiment.
How it works. Drag Cutout into a stacks page and you'll be presented with a dummy text. Replace the text with your text and drag your image into the image well in the stack settings panel. It's that simple. Of course, CutOut wouldn't be an S4S stack, if it didn't support warehoused images, but you'll also notice that it also has a setting for WebYep CMS images [Teaser]. WebYep2 is nearing release and CutOut already supports the new CMS system (as will a number of other S4S stacks).
Image Source – Drag & Drop, Warehoused, WebYep CMS
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left
Zoomy is the new name for a simple stack that enables an attractive magnification effect for RapidWeaver images. Magnification can take place on mouseover, grab, or click. There are also a couple of other settings built in to change aspects such as the zoom amount, animation speed and mouse cursor.
Zoomy will work either with images you drag and drop into RapidWeaver or images stored in a warehouse location. Compatibility is offered with all major web browsers. And Zoomy is responsive.
Image source allows you to add either Dragged and Dropped Images, or Warehoused Images.
Mouse Cursor gives you the option of seven different cursor styles.
Zoom Trigger has the options Click, Grab, Mousover, or Toggle – Grab is my favourite.
Duration sets the fadeout time once the cursor leaves the image.
Magnification is a percentage of the original size for the enlargement.
Looking for further settings? You'll be hard pressed to find any, the above are all that's needed.
Zoomy is a neat little stack that does exactly as it says on the tin and has the advantage of being both responsive and free.
SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.
All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.
The emphasis here lies on "Modern". IE8 and Android 2.3 have problems with SVG, but there are workarounds.
So why am I writing this article?
I've been using SVG images in conjunction with RapidWeaver for many years. There are a number stacks that will allow you to add SVG warehoused files (via 'Resources) to a project and I've probably used all of them at some time or other. (Graphic Stack from S4S is the ideal free option, if you're not using Foundation)
However, I've recently hit upon problems when using BWD's Sections Pro and Sections Box. I must emphasise from the beginning that the problem does not lie with BWD, but the way that SVGs are exported by default.
Today, I was experimenting with BWD Sections Box animations. I added a couple of SVGs to a project and set them to animate. The animation worked just fine – when set to 'Hover', but didn't work at all when set to 'On Page Load', or 'When In View'. I was miffed and wrote to Andrew asking about the crap he was offering RW users. (Obviously. I was a little more polite in my mail).
Within seconds, Andrew replied that the crap was of my own manufacture. (Again – Andrew and I always converse on polite terms and only badmouth our anonymous clients) And so I was forced to review my production process. Strong coffee and some patience were needed.
I began to research the web. My findings:
Most illustration applications add a load of redundant Code when exporting an SVG file, not least Adobe Illustrator CS6.
During my research, I discovered two (actually three) important web pages.
If you're just setting out with the use of SVGs – especially in combination with Adobe Illustrator, I highly recommend that you visit both this page and this page. The first explains how to export 'web-ready' SVGs from Illustrator, the second explains how to include SVGs on your web page.
However – even after following the advice from the first page, the SVG export from most illustration apps is still not ideal for the web. My new-found advice, (but perhaps Paul Russam has more input on this subject) is — visit Jake Archibald's GitHub page, drop in your shiny new SVG and save the results to a text file (TextMate, or similar) with an .svg extension. Your SVG will now be fully optimised for the web, with no redundant code and – it can still be opened and edited with your favourite illustration application (just remember to repeat the optimisation process once you re-saved).
Many thanks to Andrew Tavernor for convincing me to do some research. It was well worth the effort and I've bookmarked Jake Archibald's GitHub page. I recommend you do the same – pending feedback from Paul Russam, the SVG/Animation expert.
Go forth and create better logos!
P.S. If you need detailed information about SVG, this page will tell you everything you wanted to know.
Paul Russam commented:
I did a test a while ago where I created a simple graphic of squares, circles, text etc in Sketch, AI, and Affinity Designer and then exported each as svg. AI's export was the biggest and showed AI's print focused origins, Sketch and AD did much better but AD came out best for a couple of reasons primarily that the exported svg was the smallest and that it was 100% x 100% not NNpx x NNpx (AI's biggest problem) thus making it perfect for web use.
I've seen a couple of pages where all of the images are accessible in a slideshow. Great idea, but then the images are out of context – they are no longer related to the text – I've often had to scroll back to the text and re-read the details before scrolling back to the lightbox. Marathia's new stack Zoom is a great new solution. If you're interested in viewing the image in more detail, click on it and it will zoom to maximum size. The context is held because the page doesn't move underneath the image. When you click a second time – anywhere on the page – you are returned to your text and can continue reading exactly where you left off.
Drop Jeroen's Zoom onto your stacks page and all you'll see is an info box. To be honest, if you look at the settings panel, you won't see very much more.
First you'll find an option to activate Zoom when a specific keyword is included either within an image name, or within the image ALT tag. E.G. the image above is named 'Bergamo zoom'
In the stack's settings, I defined 'zoom' as the 'String in name' and set the Zoom option to 'Images with a name that contains…'
Now any image name that contains the word 'zoom' will be magnified, when you click on it.
The only other stack settings are Overlay Colour and Overlay Opacity – the weavercraft really couldn't be any simpler.
The zoom effect is accompanied by a subtle animation. The page is overlaid with a colour of your choice and when you click, or try to scroll the zoomed image, you are immediately returned to the exact same position on your page where you left off reading.
Regardless of how many images you have on your page, only one instance of the Zoom stack is required per page. Jeroen warns on the Zoom product page that multiple instances may disrupt the page layout.
I feel quite sure that Zoom will turn out to be a very popular stack.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16