SVG: the unknown territory

As some of my colleagues know, I have been exploring SVG (Scalable Vector Graphics) lately. I must say that my background with Mathematics and ActionScript did help me a lot for the learning curve, but it is really very easy if you know how to work with a notepad along with a vector graphics software (I’m using Inkscape as it is free for Windows and Mac).

I am amazed by its power; it is supported by all major modern web browsers and available since 2001 (technically since 1999, but widely used SVG 1.1 came in 2001). You read it right – 2001! But I think it is least known or used technology. We were overwhelmed by HTML5, CSS3, Canvas, Responsive Web Design, this-and-that etc, however we already had very flexible, widely supported Responsive Web Graphics (read SVG 🙂 ) and at least I overlooked.

I tried to create one of the glyph from Apple Color Emoji font (although in non-Apple-users it is was famous by Whatsapp!). I tried keep it very simple in terms of gradient, and obviously failed by eyebrows of the character. I admit that I am worst at tracing. Rest were just geometrical figures; mostly circles, ellipse and rectangle and I was very comfortable with them.

Below is same SVG file in different resizes (16×16 to 512×512 pixels) and the files size after gzib is only 1kb:

If you are reading this blog on IE8 or pre Android 2.2… here it is in png format

emoji-png

 

Scalable Vector Graphics (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.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari—have at least some degree of SVG rendering support.

Leave a Reply

Your email address will not be published. Required fields are marked *