Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 23 2014


Styling SVG with CSS: Capabilities and Limitations


SVG is the new standard for vector images in the browser. Vector editors such as Adobe Illustrator allow to directly save to that format and modern browsers have no problems to properly display SVG. As SVG graphics consist of markup, they can be created and maintained using your favorite text editor, just as you do with your HTML. It is even possible to style SVG with CSS, though you’ll need to know about quite a few differences in doing so, compared to styling HTML.

January 22 2014


SVG and JavaScript: What Is Possible, What To Consider?


SVG has been around for quite some time now, waiting. Waiting for proper browser support. The wait is now over as all modern browsers support the format today. With Flash being on the decline, SVG has grown even more popular. Just like the proprietary Flash format, SVG is vector-based and can even contain animations. You need not even miss out on scripting, as SVG supports JavaScript right inside its own format. Think of an open ActionScript, only more commonly known.

January 15 2014


HTML 5 and SVG: Providing a PNG Fallback with PHP and ImageMagick


Using SVG in web design has many advantages. Being a vector format is the biggest and has it standing out from the crowd of other image formats. You could have guessed, though, that while modern browsers do already support SVG, the good ole Internet Exploder doesn’t, at least not below version 9. As older versions of Internet Explorer are still out there in the wild, you should always consider implementing a fallback solution. Using PHP and ImageMagick makes it a snap to provide a fallback to PNG..

December 20 2013


Exclusive Freebie on Noupe: Human Pictos with 500 Icons of Everyday People


It’s that time of the year again. Everybody roams the cities on the hunt for the perfect Christmas present. Our present for you involves no running. Again, we’ve teamed up with Freepik, our friends from sunny Spain, to bring you another freebie. This time we’re giving away a set of 500 icons symbolizing human behavior in loads of everyday situations. Instead of bringing you sparkling Christmas icons that you cannot use anymore in two weeks from now, we decided to go for something more timeless ;-) All of the icons are free to use for any type of project, but you can only get them here…

April 25 2013


Surviving the Zombie Apocalypse with HTML5 and SVG #2: Text, Paths and Basic Animation


The first article in this series covered the basics of SVG, an overlooked, underappreciated aspect of HTML5. While different browsers implement SVG in different ways, the previous walkthrough described how to create text, incorporate SVG images and build basic shapes such as circles, polygons and paths in a way that all browsers recognize.

March 20 2013


Surviving the Zombie Apocalypse with HTML5 and SVG


As browser adoption of HTML5 continues apace, developers are finding more and more options for creating elegant, highly responsive UIs. In the case of Scalable Vector Graphics (SVG), what’s old is new again, and quite slick.

September 04 2012


Typicons: Free Icon Font with 88 Symbols


Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: only a few examples

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

September 15 2010


Cool SVG Puzzle Demo Using JQuery SVG

Via HRJ ("Overworked mad genius readying to take on the world. I am his neighbor") comes a cool puzzle piece demo written using SVG and JQuery SVG:

HRJ has some nice code. First he calls the Flickr API using JQuery and JSON and makes a JigSaw puzzle piece for each one; in the code below he is also grabbing a picture name from the #hash value in the URL if it is present:

updateStatus('Fetching photo from Flickr');
$.getJSON(''+specifiedHash[1]+'&format=json&jsoncallback=?', function(response) {
    if (response.stat && response.stat == 'ok') {
      var p =;
      $.getJSON(''+specifiedHash[1]+'&format=json&jsoncallback=?', function(response2) {
        if (response2.stat && response2.stat == 'ok') {
          updateStatus('Observe the tiles. Click on them to begin.');
          var medSize = response2.sizes.size[4] ? response2.sizes.size[4] : response2.sizes.size[3];
          currJigsaw = new JigSaw(medSize.source, medSize.width, medSize.height, p.urls.url[0]._content, p.title._content);
          var locationMatch = photoHashIgnorePattern.exec(window.location),
              myLocation = locationMatch ? locationMatch[1] : window.location;

          $('#puzzleLink').html('<a href="'+myLocation+'#photo_''">Puzzle\'s link</a>');
    } else {
      updateStatus('Error! Couldn\'t load image');

The code that animates all the tiles when you first click on a board is interesting, using a bit of JQuery SVG:

function startPlayInit() {
      var imgCenter = {x : width/2, y: height/2};
      for (var i = tiles.length; i--;) {
        $(tiles[i].sN).animate({'svgTransform':'rotate('+[tiles[i].r,imgCenter.x, imgCenter.y].join(',')+') translate('+[imgCenter.x, imgCenter.y].join(',')+')'}, {
          complete : startPlay

Basically each of the tiles is rotated and translated over 1 second with a nice animation effect.

Tags: Front Page SVG

September 12 2010


Adobe Announces HTML5/CSS3/SVG Pack for Illustrator

Exciting news from Adobe; they’ve announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG:

Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.

Some of the benefits of the HTML5 Pack:

  • Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
  • Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
  • Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
  • Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

Greg Rewis discusses it more in the video below:

Mordy Golding has a good description of some of the new features in this lab pack:

Parameterized SVG

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art. You can even create global variables.

Multi-screen SVG

You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

Mark objects as canvas in SVG

You can select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

Export named character styles as CSS

You can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

Export artwork appearances as CSS

You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.

Include selected Graphic Styles as CSS in SVG

You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What’s really cool is that you can include styles even if they aren’t applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

Great work Adobe!

August 31 2010


Raphaël 1.5 Released

Dmitry Baranovskiy and team have released another version of Raphaël, an excellent drawing and animation library backed by SVG (VML on Internet Explorer). New features in Raphaël 1.5 include custom attributes and keyframes. Keyframes can be defined similar to CSS3 Animations:

    "20%": {cy: 200, easing: ">"},
    "40%": {cy: 100},
    "60%": {cy: 200},
    "80%": {cy: 300, callback: function () {}},
    "100%": {cy: 200}
}, 5000);

Check out a demo of the new keyframe animation.

Custom attributes is also a new feature that makes it easier to do things like animating a portion of an attribute segment (demo).

Full release notes:

  • fixed IE8 issue with the HTML element named Raphael
  • fixed precision for arcs in IE
  • added caching to getPointAtSegmentLength function
  • added ability to do more than one animation of an element at the same time
  • added "cubic-bezier()" as an easing method
  • added new syntax for animation (keyframes)
  • hsl2rgb now accept h as degree (0..360), s and b as % (0..100)
  • show="new" instead of target="blank" for SVG
  • added angle method
  • added snapTo method
  • cached popup || activeX for IE
  • fixed insertAfter
  • fixed timeouts for animation
  • added customAttributes

BTW I just noticed that Dmitry is now at Sencha; they're assembling quite the team! Congrats Dmitry!

August 30 2010


New SVG Web Release: Owlephant

The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.

The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code named Owlephant:

You’ve heard of Elephants, you’ve heard of Owls… put them together and you get the fearsome Owlephant. If you encounter one, be sure it will be the last thing you ever, um, encounter. Hoot…. stomp!

With this release SVG Web now scores 55.45% on the SVG compatibility charts, almost at the same level as IE 9 (58%).

Major aspects of this new release includes overhauls and fixes for gradients, clipping, events, text placement, and more. It also includes a huge step forward in SMIL animation support, including being able to animate path segments and interpolate their values, scripting SMIL with JavaScript, and more.

This release has been built by the community, with major contributions from Bruce Duncan from; Ken Stacey from; and the always awesome (and project co-leader) Rick Masters. Thanks to the many people like Michael Neutze, Bruce Rindahl, and more for their bug testing and evangelism!

Everything fixed in this release:

  • Issue 471 : Radial gradient different between Flash and Native renders
  • Issue 349 : gradients with bounding box cooordinates are positioned wrongly on circles
  • Issue 475 : ‘this’ not getting set correctly in SVG element event callback
  • Issue 477 : The change in the size of the ClipPath area is not reflected by Flash Renderer.
  • Issue 483 : Changing gradient stop does not trigger redraw of referencing elements
  • Issue 484 : Dynamic clip-path attribute changes are not reflected.
  • Issue 476 : set Element Problems and numerous SMIL issues
  • Issue 489 : Support beginElement() for animation elements
  • Issue 494 : SVGTextNode.onDrawGlyph not removing glyph clones
  • Issue 495 : Support units-per-em on SVG fonts
  • Issue 492 : ‘button’ property missing in mouse event object
  • Issue 472 : get svg.js even more compressed with Google’s closure compiler (30K reduction)
  • Issue 499 : Object loaded svg with scripts not firing window load or SVGLoad event
  • Issue 488 : Updating styles via Javascript does not visibly update child nodes in IE/Flash
  • Issue 496 : Support exponents in path values
  • Issue 502 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly
  • Issue 503 : Radial Gradient focalLen not used for stroke
  • Issue 504 : Radial Gradient userSpaceOnUse Matrix calculated incorrectly for SVGCircle and SVGEllipse nodes
  • Issue 497 : bad ‘target’ when click on text node
  • Issue 342 : Event handler fires only after second mouse click.
  • Issue 507 : Namespaced elements not allowed until svg element added to page
  • Issue 158: Rotated text not rendering for native fonts (Mostly Fixed)
  • Issue 467 : Namespace exception loading video example in IE8
  • Issue 510 : Font Family not used when surrounded by single quotes in Flash 10.1
  • Issue 57 : SVG default fill-rule ‘nonzero’ not supported by flash 9
  • Issue 123 : Nested svg elements don’t show up in the DOM correctly
  • Issue 145: dynamically creating SMIL elements and attributes
  • Issue 356 : Show SVG Web Release Name and Revision in Right Click Menu
  • Issue 513 : getElementsByTagNameNS returning text nodes
  • Issue 515 : Call handleEvent on EventListener objects passed to addEventListener
  • Issue 517 : Elements with fill set to ‘none’ should produce mouse events but do not
  • Issue 518 : Avoid redraw on change to pointer-events attribute
  • Issue 523 : Event listener from object element may be applied to svg element erroneously
  • Issue 522 : Need way to create element with self declared namespace
  • Issue 525 : Image element not respecting display=’none’
  • Issue 524 : Jquery $(window).scroll event will not fire
  • Issue 527 : Excessive messages for detached event listeners
  • Issue 528 : Exception if remove event listener from detached element, then add to document
  • Issue 321 : Support for animating path ‘d’ attribute (and interpolate between values)
  • Issue 514 : clip-path not used when part of style attribute value
  • Issue 526 : Object using clip path cannot have its opacity animated
  • Issue 535 : Nested svg disappears when animated
  • Issue 536 : Problems tracking whether elements attached to document or not
  • Issue 537 : Animation added in onload listener does not initialize
  • Issue 538 : Node removed while invalid causes endless frame listening
  • Issue 539 : Animation with invalid or forward href causes exception
  • Issue 540 : script stack space quota is exhausted by large svg file
  • Issue 511 : Keyboard events are not supported properly

Download the release now and get started!

Please note that there are some breaking changes in this release that will affect code that uses older versions of SVG Web; more details here. Also note that SVG Web does not yet support the native SVG functionality in IE 9 preview releases.

[Disclosure: I'm a member of the SVG Web team]

Tags: Front Page SVG

July 01 2010


Firefox 4 with lots of speed improvements and inline SVG

Mozilla went to London, England yesterday night to give a workshop about Mozilla Add-Ons and show some of the cool new stuff coming in Firefox 4.

Probably the most impressive thing (next to the new Add-Ons Builder based on Bespin) was the upcoming Features of Firefox 4:

  • HTML5 Video display
  • Painting with Canvas
  • Image manipulation with Canvas – pixel testing, face detection with opencivitas
  • Green screen technologies in images and video by detecting pixel colours.
  • HTML5 embedded inside SVG (yes!)
  • SVG as an IMG
  • SVG as a CSS background
  • SVG filter/mask/clip
  • SVG animations
  • Inline SVG inside HTML5
  • CSS3 (selectors, @font-face, 2D Transforms, Transitions, Shadow, Gradients ,calculations – calc(2em-10px) )
  • APIs: Geolocation, Offline (IndexDB, localStorage, AppCache, FileAPI – binary content of a file input, file drag and drop, web workers, websockets)
  • Websockets controller running the presentation from the mobile.
  • WebGL

They proved some of the points with demos:

CSS3 filters and SVG masking on HTML5 Video:

Highly interactive video interface with SVG masking and transitions:

WebGL in Firefox 4 and on Android:

After this, Tristan Nitot covered some of the other features of Firefox 4, especially the upcoming speed improvements:

As to upcoming features to the core of Firefox, we heard about:

  • TraceMonkey (a new Javascript engine)
  • Lazy Frame Construction
  • Reducing I/O from the main thread
  • Improved startup Time
  • Hardware accelleration
  • GPU text/graphics/video rendering
  • Using GPU for text rendering
  • JavaScript JIT (JaegerMonkey)
  • HTML5 parser running own thread
  • slicker interface
  • no more modal dialogs
  • no startup interuptions
  • updates in the background

For an in-depth report on all the things shown, check out this live blog post.

May 07 2010


Raphael 1.4: Touch and more

Dmitry Baranovskiy has been hacking away on Raphael. It is almost like he has had a bunch more time for it recently! :)

Version 1.4 has a bunch of cool new features such as:

  • Touch events support
  • rgba support
  • new method drag
  • document.onmousemove = f ? Raphael.mousemove(f)
  • resetScale method
  • scaling text will change it position, but not size
  • sets now have type “set”
  • rect in VML doesn’t recreate itself on change of the R
  • paths are not rounded to the nearby pixels anymore
  • Various small bug fixes and improvements
  • added preventDefault and stopPropagation to event object

Very nice.

Tags: Front Page SVG

April 12 2010


SVG Web Releases The Fearsome Dracolisk

Over in SVG Web land we’ve pushed out a new release, code named Dracolisk:

A Dracolisk is a truly fearsome creature, able to turn an enemy into stone with merely the gaze of the basilisk coupled with the acidic breath of a black dragon, while SVG Web is a JavaScript library which provides SVG support to Internet Explorer using Flash.

This new release features patches, bug fixes, performance improvements, and more. The great thing about this release is many of the features were contributed by the community. Thanks everyone!

Learn more about this release and SVG Web.

March 29 2010


CanVG: Using Canvas to render SVG files

We love to recursively implement one technology on top of another. We have had Canvas support added to IE via VML, Flash, and Silverlight. We have had SVG implemented in Flash. Flash implemented in SVG.

The latest experiment is from Gabe Lerner and is CanVG. As you can guess, it renders SVG files via the <canvas> element. All in a few hundred lines of code!.

Check out the test playground to see it in action.


March 11 2010


SVG Wow!

Erik Dahlström and Vincent Hardy have put together a cool website, called SVG Wow!, that showcases SVG doing things you didn’t expect SVG can do:


There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):


There are lots of other great samples for you to play with and study!

Tags: Front Page SVG

February 02 2010


New Version of SVG-Edit

SVG-Edit is a nifty open source editing web app that uses SVG and doesn't need a server-side:


The SVG-Edit team recently announced SVG-Edit 2.4, code named Arbelos. New features include:

- Raster Images
- Group/Ungroup
- Zoom
- Layers
- Curved Paths
- UI Localization
- Wireframe Mode
- Change Background
- Draggable Dialogs
- Resizable UI (SVG icons)
- Convert Shapes to Path

Try out the demo here:

Check out the project page:

Read the release notes:

January 06 2010


Microsoft joins SVG Working Group

My gut feeling whenever I hear a “we are joining a group” type post from anyone is “thanks for telling us, ping me when you have an implementation”.

However, when someone as big as Microsoft blogs about joining the W3C SVG Working Group they are trying to send a signal. Hopefully they will help the process and SVG will proceed nicely and we will see it on more user agents.

But, as a friend just said, I will hold my breath to celebrate until I see it and Canvas in a browser :)

In fact, the lack of talk about Canvas from Microsoft has me worried.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!