Archive for the ‘SVG’ Category

No Comments

The Art of Moving

Saturday, August 4th, 2012

Morphing with SVG

Going from one pose in Yoga to another.


Unleash the power of SVG sprites

Wednesday, April 4th, 2012

Here at Webonomic we always liked SVG. We experimented with SVG and SVG background quite a few times, also creating some fancy animated backgrounds and other animations at the times Apple hadn’t even released Safari or thought about CSS transforms, transitions, and animations.

Unfortunately SVG has never been really embraced by the majority of browser vendors, only Opera was enthusiastic about it, probably because both Adobe (Flash) and Microsoft (Silverlight/ Vector Markup Language (VML) had their own standards and felt threatened by it. (Adobe doesn’t make browsers, but SVG support in their Creative Suits has never been impressive)  Maybe that’s gonna change now with HTML5 and even Microsoft Explorer 9 support.

Using SVG as images was one thing, using it as a background image was even better.

Setting SVG images by using :target and ID’s

And now we stumbled upon this clever trick showing layered SVG images by setting the hashtag to an ID on a g element and using the CSS :target rule. Simple and elegant.

g { display: none }
g:target { display: inline }



yoga position 1

yoga position 2

Works in Firefox and Opera at the moment. What about Chromium?

Combine with background images

Combine that with a background image and you can use sprites without setting the horrible position values:

Compare this elegant code

div{ background: transparent url(pathto/yoga.svg) no-repeat;}

div.position_1{ background-image: url(pathto/yoga.svg#postion_1); }

div.position_2{ background-image: url(pathto/yoga.svg#position_2);}

with this old code

div{ background: transparent url(pathto/png) no-repeat ;}

div.postion_1{ background-position: 10px 20px}

div.position_2{ background-position: 30px 20px}

Live Demo

Let’s try setting the background image in the following two paragraphs:

The problem of the last example is not only that you have to calculate all the horizontal and vertical offsets, but also the maintenance of the sprite itself.  And scaling issues are much better handled by SVG then of PNG or GIF. I think even a SVG-minifier can be made to concat and minfy several SVG images into one SPRITE – it’s XML in the end – without going back to Inkscape or GIMP, (or Adobe CS  if you prefer to use proprietary software.)
Works in Firefox and … Well, only Firefox at the moment. Great that you can set the SVG-layer from the main document. But why can’t we set the fill or strike color?

We need CSS access

The last thing we wish for is that you can set the CSS from within the main document. I never understood why you couldn’t do it with SVG objects, but it would be even better if you could do something like this (both for SVG images and SVG background images):

.user svg[src=pathto/svg] #position-1{
fill :blue;}

.student svg[src=pathto/svg] #position_2{
fill :red;}

Of course above example isn’t working or correct, – how should we select both images and background images with actual CSS grammar – but making SVG (background) images accessible for  CSS (and JS?) would be awesome. (beware security and cross origin issues)

Targeting SVG Images with CSS

// targeting SVG images

// new CSS syntax for targeting both SVG and SVG background images

// I guess setting the URL is better then setting an extra ID or class, after all aren't URL's unique by definition.

Then you can unleash the power of SVG sprites completely, and skin every site and web-app `on the go`!

No Comments

Will Microsoft add SVG support to Internet Explorer in the near future?

Sunday, January 10th, 2010

Microsoft has applied to join the World Wide Web Consortium (W3C) Scalable Vector Graphics working group. I would say ten years to late, but they did it. So will all the examples on this site work in Explorer soon. I hope, but I fear not. Let’s explain that to you.

Animated SVG Logo Webonomic

One of the reasons I write critically about Microsoft is that they’re trying to slowdown internet innovation, probably best illustrated by the so called Embrace, extend and extinguish strategy, which had the purpose to extend open standards with proprietary capabilities, and then using those differences to disadvantage its competitors.

As a consequence, and another big reason I don’t like Microsoft, they push the time and costs of developing websites by approximately 40%. Simply because you have to write your JavaScript twice, can’t use modern CSS and lose a lot of time fixing lay-out bugs. That’s the price the world is paying for the Microsoft dominance in the browser market. Other estimations go about 20-30%, the well know Dutch developer PPK on quirksmode “Want a site that works perfectly in IE6? Fine, but it’ll cost you about 20 to 30% extra.”. (Costs of JavaScript libraries are excluded here).

I think Microsoft used that strategy and I think they were successful. Actually Microsoft stopped developing their browser form 2001 till 2007. Second thought: there is only one way that Microsoft will change that strategy, loss of market share. That didn’t really happen, at least not on a big scale, seems that most consumers don’t even know the word browser, Explorer worked out of the box, the blue e on your windows desktop was a synonym for internet, and Opera or Firefox a program for hackers or activists. Most sites used Activex, or other proprietary JavaScript, so a lot of sites didn’t work in Opera, actually they were designed (deliberately) to only work in Internet Explorer.

Now Google (and to a lesser extent Apple) entered the browser-market, things are starting to change. At least the web is gonna change: sites do not longer contain information, they contain applications.

And when you use web-applications, you don’t need them as a stand-alone program. That’s the danger for Microsoft. It’s not new, it has always been there and Microsoft knew. That’s why they made their browser `a critical part of their operating system`, technically nonsense, but they reached their goal. I took the EC a few years to refute that claim, a few years Microsoft made a lot of money.

Why didn’t Microsoft embrace SVG earlier. Well they developed Vector Markup Language (VML) during the nineties. That didn’t became a standard, so I guess they decided to stop doing anything for 5 years. Now Microsoft gained some substantial marketshare with Silverlight, a Flash/SVG comparable technology, which it’s used a lot for streaming Media lately, they probably think let’s join the SVG working group to – these are my wordssee if we can slowdown their activities.

Will we see SVG support in Explorer 9. I bet not!


I was totally wrong. There is SVG support in Explorer 9.

I can take my loss, it makes me happy to see Microsoft embrace webstandards 🙂

No Comments

Google Chrome joins Opera in SVG background image support

Thursday, December 10th, 2009

I always liked Opera’s support for SVG, and I really welcomed their initiative to treat SVG as any other image type, like jpg or gif or png. After all SVG (Scalable Vector Graphics) is a vector-image  mark up language (XML), like Flash or Silverlight but free and it’s an Open Standard.

Round corners, gradients, multi-image background, watermarks, nearly everything (animation?) can be handled by SVG, so it’s quite a powerful feature. Creating a dataURL of SVG is possible, so creating a CSS file with several gradient backgrounds, round borders is indeed a very efficient way of designing webpages. It’s cached, and although the initial css file is a bit heavier, no extra server requests are needed  to load additional images. It’s fast, lean and flexible.

I’m glad to see Google Chrome as the first other main browser join Opera in support for SVG images as backgrounds in CSS declarations.

SVG support as background image in Google Chrome

SVG support as background image in Google Chrome

Chrome’s implementation isn’t without errors, see what happens if you start scrolling the webpage in the brand new Chrome for Linux beta, but is a start. I hope Mozilla/Firefox and Apple/Webkit will follow soon.

Google Chrome rendering issues SVG background

Google Chrome rendering issues SVG background

I’ve given up expectations for Microsoft Explorer, see my other post. To be short: they wanna sell their Silverlight.

I’m not without any hope, :), I hope Internet Explorer users will start using other webstandard compliant browsers and consequently MS marketshare will drop significantly. Only then they probably will convert to an attitude of supporting and promoting open standards.

Comments Off on Lorre says SVG SVG SVG SVG

Lorre says SVG SVG SVG SVG

Saturday, February 21st, 2009

Lorre is now talking SVG to a lot more people:

style="width:300px;margin:0 auto;display:block;">
No Comments

Lorre says SVG SVG SVG

Saturday, February 21st, 2009

I visited the zoo, brought my camera, shot a parrot (Don’t worry he is still living, I don’t go back to the petshop to reclaim.)

I reduced colors in Gimp, saved as PNG, did a bit tracing in Inkscape with Potrace and here is the SVG Parrot from Amsterdam!
Parrot in SVG
Format is SVGZ, weight ca 60kb.
Opera can show svg as IMG src, I dunno about other browers, but it would be nice if they can. It’s easy to upload and insert in a WordPress blog that way.

[sourcecode language=’xhtml’]
Parrot in SVG