a look at design for the web & all it entails

· view menu ·

icon design

Icons are the small little details with such high importance that they deserve as much TLC as the rest of your design. If you search for icon sets online, you will find an ever growing number of beautiful sets to choose from. However, it will be worth your while to at least explore icon design, if not learn the craft in depth.

Icon design is challenging but fun ~ so take some time to dive into it and you’ll soon have beautiful icons making your site designs shine ;)

useful links

icons / symbols


SVG ~ heaven and hell

One of the most exciting developments regarding icons, and more, is the possibility of finally using SVG for our vector work. Though you still need to be cautious, considering older browsers and required fallbacks. There is plenty of documentation out there by now, and you should take time to do some reading and plenty of experimentation and testing before you commit to SVGs for your web project. But it is worth your time and attention – support from browsers is already pretty good for the latest versions, and is only set to grow :)

Little over a year ago, I worked with my team on using SVGs with animation, mainly created for this page of our site, how we work, as well as our error page.
The list of references, articles and tools below is what we went through when figuring out how to best use SVG, combined with the CSS animations.

a few notes on what we’ve learnt:

  • make sure your vector shape is as clean as possible
    (I’m using pathfinders a lot, keeping original shapes – best expanded for lessor points, cleaner shape = less code, less weight)
  • always apply transformation to <svg> element, not <g> element
  • ideally, place SVG into source code for fewer calls to server
  • major differences in SVG rendering between Chrome/Safari/Opera and Firefox – work/test across all to ensure solid display
  • check across vector apps for SVG output – compare / always optimise for less code

In regards to the different SVG outputs – have a look at the difference between the code from Illustrator (left) and Inkscape (right).

SVG code comparison

SVG ~ let’s take a look.


Using last week’s logo – let’s start by opening the SVG in the browser and taking a look at the code. This is the output by Illustrator, before any optimisation of the vectors; code is untouched and as generated via the ‘save as’ command.

↓ download logo file
Open the file in your favourite vector app and see what could be optimised in terms of the graphic itself. Lastly, use the brilliant SVG Optimiser by Peter Collingridge to optimise the code – preview / test and see :)

Know your experts: Sara Soueidan

image: partial from sarasoueidan.com/about © Sara Soueidan

Sara is amazing! You might have come across her work before. She has written many in-deth articles covering some of the complexities and powerful features of SVGs. I was going to give you a list of articles to read, like the brilliant Understanding SVG Coordinate Systems and Transformations (Part 1) – but then realised there are too many :) I recommend that you search Sara’s site for SVG – and absorb them all! (as well as the rest of her work: her now famous CSS reference on codrops is worth bookmarking, if you have not done so already :)

Comments are closed.