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:
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.
Another great advantage of SVG: Because you don’t have to “mask” parts of the logo with the same solid color as the background color like in most CSS3 versions, you can use ANY background.
Absolutely: used in this way it’s like a scalable transparent png.
Awesome! Any pointers on how to transform on set of paths into another set of paths (basically the twitter -> nike transform, only for a bit more complex logos)?
Uhm…I think is possible to merge two (or more) paths in only one path like here:
http://stackoverflow.com/questions/5892549/is-there-a-way-to-merge-two-path-elements-svg-using-javascript
just writing all the coordinates in a row.
the title of this article must be like
“Twitter SVG logos vs. twitter pure CSS3 logos”
logos can go more and more complex if you search the and according to rosella svg is only choice left in the future of internet
Read the two comments above yours.
About the future of internet, instead: touchscreens made of real cute kittens fur, too.
CSS is supposed to be dictating presentation (“how” an element is presented) not content.
SVG is that content.
SVG is cool but…Actually I find png’s quite handy for logos.
Well I did this website to showcase the powers of CSS in a way that’s fun and easy to understand in 1 second. But the logos are very scalable, and on mac computers I bet you can’t tell the diference between this and a svg (without using the inspector/firebug :) )
I believe that one of the advertisements brought on my browser to resize, you might possibly want to put that on your black list.