Share your knowledge: SVG

Showing posts with label SVG. Show all posts

Tuesday, October 16, 2012

Using SVG in modern browsers

SVG has come a long way and I can still clearly remember the days one had to install Adobe flash to enable SVG in the browser. I was pretty excited about this technology as it enabled me to dynamically generate images from the domain model. Currently you can even use the html5 canvas tag. But back to SVG. We switched from using .eps files not so long ago to SVG. You can't render EPS in the browser so that's one big drawback. And the good news is recent browsers (IE9, chrome, firefox, ..) natively support SVG. Forget about using the old school <object> and <data> tags to embed SVG ;-)

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />     
    <title>SVG test </title>
  </head>
  <body>
    <div>
      <div>embedding SVG with img tag</div>
      <div><img src="test.svg"/></div>
    <div>
    <div>
      <div>embedding inline SVG</div>
      <div>
        <svg  xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40mm" height="28.63mm" viewBox="0 0 90.00 81.14">
          <rect x="1" y="1" width="60" height="60" fill="none" stroke="red" stroke-width="2"/>
          <circle cx="40" cy="44" r="30" fill="none" stroke="yellow" stroke-width="10"  />
          <text x="24" y="48">SVG</text>
        </svg>
      </div> 
  </body>    
</html>

test.svg

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40mm" height="28.63mm" viewBox="0 0 90.00 81.14">
  <rect x="1" y="1" width="60" height="60" fill="none" stroke="purple" stroke-width="2"/>
  <circle cx="40" cy="44" r="30" fill="red" stroke="blue" stroke-width="10"  />
  <text x="24" y="48">SVG</text>
</svg>

The result looks like presented below

Thursday, March 18, 2010

Creating dynamic watermarks with SVG

My customer wanted to show a watermark which should be dynamically created based on the data (xml) which was processed with xslt. The end result is a nicely styled html page. (see image below).

In order to achieve this result I automatically pulled out my SVG knowledge which would allow me to create images dynamically. Since not all browsers are able to render SVG i used Cocoon's batik block to serialize the svg image to png.

I'll shortly show that this can be easily accomplished with Apache Cocoon 2.2.

First make sure you add following dependencies to your block:

Next in line you will need to create some SVG template for your watermark:

A next step is writing some flowscript function which sets the jx transformer context:

We also need to make some sitemap adjustments:

And finally i need to add the background image dynamically based on content within my stylesheets:

And to finalize the positioning etc i made some css adjustments:

Tuesday, May 12, 2009

Creating Scalable Vector Graphics with Apache Cocoon

I've done some projects in the past where we created Scalable Vector Graphics. The nice thing about SVG is that you can scale the images without any quality loss. Back then, the only way to render SVG in the browser was by installing a plugin from Adobe. Now most browsers are able to render them without any plugins.

So how do you get started? This little tutorial assumes you have some basic Cocoon knowledge

Create a SVG template with the SVG editor of your choice.
Some suggestions:

Replace the hardcoded values which should become parameters like this: ${logotext}

Below you will find some relevant sitemap.xmap snippets which i configured to create a dynamic image.

If we take a quick look at line 138, you see that when we invoke the url wich matches "generate/logo", the template "ciber/templates/logo.jx.xml" is read, the ${} values are replaced by their corresponding values if present and the svg-template is serialized to jpeg.

We only need some way to fill that missing ${logotext} parameter. Cocoon offers flowscript to the rescue. Flowscript is plain javascript in which you can write the controller which takes care of building the model which will be passed on to the view. (Model-View-Controller).

Our controller will use a sitemap parameter to fill in the missing ${logotext}. In line 132, you see a match pattern "logo/*" where * is our first and only {1} parameter which we pass on to the flowscript function "createLogo" on line 134.

Let's take a quick look at our flowscript (logo.js)

When you invoke following URL:
"http://localhost:8888/cocoonDemo/logo/Creating SVG with Cocoon" the sitemap matches this on line 132. It call's the function createLogo() and passes it the sitemap parameter 'logotext' with value 'Creating SVG with Cocoon'.

On lines 2 and 3 we build a javascript object 'data' with a variable named logotext and pass it the value of the sitemap-parameter with the same name. On line 5 our controller tells cocoon to render a page by invoking the match pattern "generate/logo" and pass it our constructed model 'data'.

Now the sitemap matches line 138, but this time it does have a model containing a value for 'logotext'. Let's take a look at the end result.

This demo shows you the most basic (simple) case to create dynamic SVG. More difficult use cases are when you read in your data from a database or XML files and use this data in transformations to construct SVG.

Cheers,
Robby