marco rosella

Interactive Designer & Developer.




SVG logos vs. pure CSS3 logos

I like so much the recent experiments with HTML + CSS3 pure logos, great examples of creative use of :before and :after pseudo-elements and border, transform and gradients new properties.
But: for ‘real’ pages will you spent hours and hours to combine a lot of tags (semantics 404?) and a lot of selectors to just create something difficult to transform, scale and animate? This remembered me the guy that in 2004 jokes to build a page with only <small> or <big> tags.

Maybe in this case is better use SVG: for example…

CSS3

This Twitter logo is made by 30 tags and 31 selectors.

SVG

Here’s the Twitter logo in SVG, made with a drawing tool like Inkscape or Illustrator that can export in that format:

Twitter Logo
If you view the source code of this file, there are only two tags, <svg> and <path>:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
    <path fill="#33CCFF" title="Twitter Logo" d="M197.223,82.571c-5.611,0.958-13.75-0.038-18.061-1.832c8.96-0.742,15.027-4.815,17.365-10.343
    c-3.229,1.988-13.26,4.153-18.793,2.09c-0.275-1.301-0.575-2.539-0.879-3.66c-4.213-15.506-18.663-28.001-33.794-26.491
    c1.22-0.495,2.458-0.955,3.708-1.375c1.656-0.597,11.436-2.192,9.898-5.639c-1.303-3.041-13.249,2.287-15.496,2.987
    c2.969-1.113,7.881-3.033,8.403-6.451c-4.546,0.623-9.012,2.777-12.46,5.906c1.248-1.34,2.191-2.974,2.391-4.737
    c-12.133,7.762-19.222,23.396-24.955,38.574c-4.501-4.372-8.502-7.812-12.079-9.729c-10.043-5.384-22.057-11.012-40.906-18.019
    c-0.58,6.243,3.083,14.55,13.63,20.066c-2.283-0.309-6.462,0.383-9.799,1.177c1.359,7.16,5.805,13.052,17.851,15.898
    c-5.503,0.362-8.353,1.624-10.928,4.318c2.506,4.978,8.63,10.831,19.628,9.627c-12.24,5.282-4.992,15.061,4.968,13.601
    c-16.98,17.566-43.761,16.263-59.139,1.583c40.145,54.762,127.421,32.382,140.421-20.363
    C187.951,89.841,193.672,86.386,197.223,82.571z"/>
<svg>

That’s unreadable in the same way (they are coordinates…), but with just the add of the “transform” attribute you can scale and translate in every way you want, and if size counts that’s only 8k of code instead of 16k of the related PNG.
To use it – starting from now – also in browser like IE6, you can write with Raphaël a function like this:

var twitterLogo = paper.path("M197.223,82.571c-5.611,0.958-13.75-0.038-18.061-1.832c8.96-0.742,15.027-4.815,17.365-10.343 c-3.229,1.988-13.26,4.153-18.793,2.09c-0.275-1.301-0.575-2.539-0.879-3.66c-4.213-15.506-18.663-28.001-33.794-26.491c1.22-0.495,2.458-0.955,3.708-1.375c1.656-0.597,11.436-2.192,9.898-5.639c-1.303-3.041-13.249,2.287-15.496,2.987c2.969-1.113,7.881-3.033,8.403-6.451c-4.546,0.623-9.012,2.777-12.46,5.906c1.248-1.34,2.191-2.974,2.391-4.737c-12.133,7.762-19.222,23.396-24.955,38.574c-4.501-4.372-8.502-7.812-12.079-9.729c-10.043-5.384-22.057-11.012-40.906-18.019c-0.58,6.243,3.083,14.55,13.63,20.066c-2.283-0.309-6.462,0.383-9.799,1.177c1.359,7.16,5.805,13.052,17.851,15.898c-5.503,0.362-8.353,1.624-10.928,4.318c2.506,4.978,8.63,10.831,19.628,9.627c-12.24,5.282-4.992,15.061,4.968,13.601c-16.98,17.566-43.761,16.263-59.139,1.583c40.145,54.762,127.421,32.382,140.421-20.363C187.951,89.841,193.672,86.386,197.223,82.571z").attr({fill:"#33CCFF", stroke:"none"});

that followed by this two lines:

nikeLogoPath = "M66.967,115.115c-4.732-0.188-8.605-1.483-11.632-3.889c-0.578-0.46-1.955-1.836-2.416-2.419c-1.228-1.542-2.062-3.046-2.62-4.712c-1.713-5.131-0.831-11.865,2.521-19.255c2.871-6.326,7.302-12.6,15.031-21.291c1.138-1.279,4.529-5.019,4.55-5.019c0.009,0-0.175,0.321-0.408,0.711c-2.01,3.365-3.729,7.331-4.667,10.763c-1.504,5.509-1.323,10.235,0.532,13.901c1.28,2.524,3.474,4.711,5.94,5.92c4.318,2.117,10.641,2.291,18.362,0.513c0.532-0.123,26.874-7.116,58.538-15.54c31.663-8.424,57.576-15.312,57.579-15.306c0.01,0.008-73.563,31.491-111.758,47.823c-6.049,2.587-7.667,3.239-10.509,4.238C78.741,114.106,72.229,115.323,66.967,115.115z";
twitterLogo.animate({"path": nikeLogoPath, "fill": "#111"}, 2000, "<>");


can trasform a Twitter Logo in a Nike logo in just one click.
Try it:


Experiment converting your vector logos in SVG and play with it: some examples could be found in a set of icons with one path only released by Raphaël’s creator Dmitry Baranovskiy.