HTML5 SVG Demo - A text with pictures

On THIS Page:
  • The copy/paste SVG strategy
  • The copy/paste SVG strategy for complex and large pictures
  • Using the object tag

Hello, this text isn't really about trees. It is a demo that shows how to include SVG graphics in HTML5. Read Using SVG with HTML5 tutorial

Simple tree

The copy/paste SVG strategy

The picture to the right contains clean SVG code. We created it with SVG Edit, a very nice and easy to use online SVG editing tool. The only thing we changed in the code was adding a style="float:right" CSS float to the svg tag.

The copy/paste SVG strategy for complex and large pictures

Copy/paste of SVG images that include extension code may or may not work ... image/svg+xml

Trees can have roots as you can see by looking at the picture to the left. This picture was found at OpenClipArt.org and was made by Merlin2525. Since it was way to big, we had to edit the SVG a bit. We inserted the following code (first element after the "svg" element) and last element before the closing "svg" tag. "g" is an SVG tag that will group all contained elements. The "transform" attribute allows to define transformations like "scale(0.1)" that will reduce the size of a group to 10%.

 <svg ......>
 <g transform="scale(0.1)">
  .... rest of the SVG code remains inside
  </g>
 </svg>

In the outermost svg tag at the beginning, we added a style attribute attributesand we changed the width and the height: 

 style="float:left;margin:5px;"
 width="43.318341" height="65.187085"
The SVG code included many strange tags that will not pass validation. In XHTML they wouldn't be illegal, but in HTML5 they probably are. These tags are extension tags for editing with Inkscape. One way to remove these unwanted tags, is to load the SVG into Inkscape and then save as "pure" SVG. This example does not show in IE9.

Using the object tag

Of course, we also can produce palm trees in different ways. This one was embeded using the object tag. However, we had to edit the SVG code in order to reduce the picture size. We used the following strategy, insert a g with a transform: 
 <g transform="scale(0.1)">
 .....
  <g>
We also could have set the width and height in the included SVG files to 100%. Read the Using SVG with HTML5 tutorial.
Created by DKS. This is free code
Last modified: March 2012