I have created a 3 part set of videos on the advantages of warehousing images in RapidWeaver, how to creat SVG images and also how to live edit SVG using a text editor. I Hhpe this is useful to anyone not familiar with warehousing, SVG, creating SVGs using Autodesk Graphic and loading to a server using an FTP program.
Warehousing images in RapidWeaver & SVGs Part 1 of 3
Warehousing images in RapidWeaver & SVGs Part 2 of 3
Warehousing images in RapidWeaver & SVGs Part 3 of 3
Just been doing a few other videos for a significant new release to be announced very soon.
Thank You Gary… This tutorial was super helpful, so appreciate you taking the time to share it here in the forum. Also it is great to see another person out there using Graphic, I have been using it personally since late 2014 and just brought it into my professional workflow last week as part of a move away from Adobe products.
Your tutorial was quite timely as I just started down the path of researching how to best go about using SVG’s in the Rapid Weaver workflow. Read through this post from CSS-Tricks which was helpful but a little perplexed as to how to go about using inside a Foundation Theme project and keeping everything responsive.
Do you have an additional resource or could you elaborate further as how to best use SVG correctly within a Foundation Theme project so everything is compatible with the widest range of browsers and properly scales at varied breakpoints?
The only approach I am aware of, is to use Stacks that support warehousing of images. RW doesn’t natively support SVG’s or warehousing so if you want to use an SVG for your RW logo you out of luck. More and more Stacks do support warehousing and SVGs and the pioneers in this area are Big White Duck, Joe Workman and S4S (in no particular order).
You can’t get any more responsive than an SVG image and the clever stuff that the Foundation Image stack does by only loading the images required for the screen size, isn’t really relevant to normal SVG image. Most SVG images are so small that it makes no difference and there is no such thing as a mobile sized SVG or a desktop sized SVG because exactly the same image is used for both. So whether you want an SVG to fill a retina 27" iMac or an iPhone 4 screen, the image is the same one.
To use SVG’s in Foundation, simply use the warehouse link for the mobile image and that’s all you need to do. Also bear in mind that SVGs will either scale to fill their container or scale to reach any min or max dimensions that you set in the Stack.
P.S. Yes Autodesk Graphic is a superb web graphics program. Had Adobe not killed off Fireworks and given it SVG support I would not have gone searching for a Fireworks replacement. Very pleased with Graphic indeed.
Thank You For The Response Gary… So if I am understanding all this correctly, most if not all the issues covered in the CSS-Tricks article are actually OK inside the mentioned RW workflow as the Foundation Theme is using a <img> tag and Graphic includes the height and with properties in the SVG code. So aspect ratio is maintained and browsers know how to properly scale the SVG.
Thank you again for providing this tutorial, super helpful and appreciated.
I didn’t read the CSS Tricks article so have no idea.
However, Graphic does set the dimension that you create in a blank image and the SVG when exported from Graphic has that dimension inside the SVG. That is exactly what my video shows. If you do that with Illustrator o Affinity Designer for example, then the resulting SVG when viewed as a warehouse image will scale to fill the screen.
