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.
So you're a hardcore coder and you want to build your website using RW. You will need Stacks 3 and a copy of the HTML Body Stack which comes with a dedicated blank theme.
You may, of course use any theme you like, but hey, you're hardcore and you want full access to the <head> and <body>, right? These are preconfigured when you use themes. Not the case with 1LD's Blank Theme – it's blank and just begging for an HTML Body stack.
Let's start a new project.
Open a new Stacks project, choose the HTML Body Blank theme and then check your Stacks' library for HTML Body. Drag this stack onto your page and hey! It looks like Stacks, but it works like HTML. It has three themes for the editing mode – the Standard Stacks' theme, Light and dark.
You added it to your page already? You now have a <head> and Before <body> elements on your page, but both have the 'Add Child' + button!
Go on – click the + button in the <head> area. Now you can link your CSS and meta tags, etc. or, may the heavens forbid, a stack.
Same thing with the <body>. Click the + button and add your HTML content, non-wrapped HTML, or a stack.
I know some people who are going to love this.
Imagine – we're halfway down our new HTML page and it's looking great. But we need an image slider. So off we go to make coffee – that always helps us concentrate when browsing that code that we need. But wait – time is tight. We need the slider now, this instant.
What is easier than dragging one in from the stacks library? So what, if you didn't code it yourself (i.e. borrow the code from the web), forget vanity; time is tight – remember?
But now, watch this – I'm working on a Foundation project and just discovered the source code for a cool calendar. I drag an HTML Element stack into my project and add the code to it. It is already surrounded by <divs> and I can add as many child stacks to it as I need.
1LD created HTML Body as a way to give themselves the control they wanted to have in order to create HTML templates for their own web development projects.
Using a hybrid Stacks/HTML editor gives RapidWeaver users the ability to really mold projects into whatever they need them to be, whether they need to include simple to use RapidWeaver Stacks or import advanced external libraries.
To get you started 1LD has thoughtfully included a free project file that they created with Bootstrap. The project contains 5 sections that you can save as partials for use in other projects. Perhaps we might even see a Foundation project soon?
If you have little, or no HTML/CSS experience or suffer from code phobia, this is not the stack for you — 1LD can only support the stacks and theme, but not our inability (and yes, I include myself) to understand what all those <div>s, </p>s and <span>s are about.
If you're a coder and use RapidWeaver for the obvious ease of use that it offers, HTML Body is exactly the stack that you've wished for all these years.
AddEvent is a new stack that, with the help of some very clever PHP, will automatically generate an .ics version 2 file and add it to your calendar – and your page doesn't need to be a .php page to do so, .html works just fine.
In addition to the event title and date, AddEvent also supplies a description, location and web address. In newer calendar software such as iCal, locations are automatically presented with a map pin and optional directions. Users can set a reminder and sync the event across all their devices.
AddEvent doesn't rely on any external (and expensive) services to go about its business, and it's not necessary to register every website you wish to use the stack on. Just drop the stack into a Stacks3 page, fill in the event details and publish:
Event Title is straightforward – add the name of your event to the stacks panel. Add Start and End Dates (including the time) and add a Location. Now you can add a short Description and – if you wish – a link to the events web page.
Add the Event File Name and, if your server isn't in the same time zone as the event, add your server's time zone so that the times can be synchronised across different countries/states.
All that's left for you to do now, is set the button text (you can also add a FontAwesome icon e.g. <i class="fa fa-calendar"></i> Add To Calendar) and, if you wish to alter the button's default appearance, add a custom Button Class.
Before you publish your event, you can check that everything will be submitted correctly by taking a look at the AddEvent stack on your page.
Note: Your server needs to be running PHP 5.6 or newer. Once you've ensured that the is the case, publishing and remembering events couldn't be simpler.
So what's the point of a web inspector, when RapidWeaver already has one built in? Codafy is different! Codafy will help novices and experienced programmers alike in quickly identifying elements on a RapidWeaver page.
Drop Codafy onto a Stacks page and when you switch to preview, you'll see that there is a button in the top left hand corner of the screen 'Launch Codafy'. Once you've clicked the button, you can click any element in your preview to receive immediate information about that element.
The information that Codafy supplies will inform you what sort of element you have selected on a page. It will display any ID or classes applied to said element – useful for adding custom CSS code or for configuring other stacks to interact with content, like navigation. Codafy will show the positioning of the element within the DOM (document object model) hierarchy; which can help identify other stacks that are influencing your selected element. And finally, Codafy will give you the basic CSS box-model information for a container - including height, width, position, padding, margins and borders.
All of this information is, of course, available via the web inspector, but – it requires some digging around to find what you are actually looking for. With Codafy you simply click on the element and the information is displayed instantaneously, making the process a lot easier.
Codafy is a free download from the seyDesign website – any donations will, of course, be much appreciated.
Did you ever build a page that had a number of buttons on it? You build one button, tweak it until you get it just right, you then duplicate it eight, nine, ten times and add the links. You finish the page and show it your customer – who doesn't like the button colours. Start over.
I think you'll find that the same thing happened to Tommy Hansen recently because the DeFliGra site suddenly has a new stack The stack is simply called Click and Tommy assures me that it is a very simple stack. What Click does, is ensure that every button on your webpage – or even your web site, if you want – looks identical.
When you've installed Click, you'll find that there are two stacks – a Click Master and a Click Servant. With the Master on your Stacks page, you first set a Group ID (the standard setting is 1), the next setting is Alignment – the button can be aligned left, right or centered within its containing stack.
The button padding for left/right and top/bottom is set separately as is the font size and line height. The text itself may be set to bold. The text can be set to change colour on hover.
The buttons are flat so the colour settings are for passive and active state, however there are options to add custom CSS code to alter the button's appearance.
There is also a unique option to set an outer border around the button. The border has eight different settings from plain, over dashed or dotted to grooved. The outer border may be activated or deactivated, as can the button filling. The corner Radii for both the button and the border can be set.
This results in three different button designs:
1. A flat button that changes colour on hover.
2. A flat button with a border, where either the button or the frame or both may change colour on hover.
3. A ghost button that changes colour on hover.
Once you've set your Click Master, you can drop as many Click Servants on to your page as you wish and – as long as they have the same Group ID – they will look identical to the first. Now all you need to do is change the text and set the individual links.
As already mentioned and as is to be expected, Tommy has included extensive CSS settings. The result being that with just a little code dropped into the sitewide CSS container, every button in your entire project will look identical and for alterations just a single Master stack would need to be changed. How cool is that?
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