web counter
Scalable Vector Graphics in RapidWeaver
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Scalable Vector Graphics in RapidWeaver

SVG, or Scalable Vector Graphics is the latest trend for adding logos, illustrations and animations to web pages. Or is it? SVG has actually been around since 2001, but has been more, or less ignored.
So what is SVG?
SVG is vector based as opposed to pixel based. The result is scalable images that retain their image quality at any size. Text and contours remain razor sharp, no matter to which extent they are scaled up, or down. They can also be animated.


SVG – Wiki Commons

Wiki says:

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.

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

My Image

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required