On THIS Page:
|
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
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.
<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.