XML Languages – SVG

XML – Scalable Vector Graphics

Prerequisites

Knowledge of basic html to create pages

Knowledge of XML useful, but not required

Summary

 

Topics Covered:

Creating a simple drawing in SVG

Embedding drawings into a web page

Video

http://online1.daytonastate.edu/player2.php?id=dc20d1211f3e7a99d775b26052e0163e 

Reference Materials

http://code.google.com/p/svg-edit/ – A straightforward JavaScript SVG editor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Funny Face</title>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <g id="svg_3">
   <ellipse ry="86" rx="56" id="svg_1" cy="100" cx="147" stroke-width="5" stroke="#000000" fill="#ff0000"/>
   <ellipse ry="32" rx="18" id="svg_2" cy="108" cx="129" stroke-width="5" stroke="#000000" fill="#ffffff"/>
  </g>
  <g id="svg_4">
   <ellipse id="svg_5" ry="86" rx="56" cy="104" cx="284" stroke-width="5" stroke="#000000" fill="#ff0000"/>
   <ellipse id="svg_6" ry="32" rx="18" cy="112" cx="266" stroke-width="5" stroke="#000000" fill="#ffffff"/>
  </g>
  <path d="m61,207c0,1 1.56532,8.65942 5,15c3.62743,6.6964 6.1731,8.85274 7,10c3.92236,5.44197 6.5158,12.4391 12,18c6.47378,
6.5643 13.81266,11.20682 16,13c8.36497,6.85764 14.77054,11.48801 25,16c12.74379,5.62103 25.47125,11.45877 32,13c0.97325,
0.22977 4.64632,1.91641 14,5c8.75601,2.88657 22.97047,5.2189 37,7c8.98328,1.14044 18.10387,0.92328 34,3c10.11211,1.32108 15.00391,
2.24963 23,2c16.02341,-0.50024 37.32101,-0.24295 49,-3c2.17624,-0.51373 4.30804,-2.90967 8,-5c7.17584,-4.0629 14.82108,-7.29871 18,
-9c1.76334,-0.94373 8.93002,-5.46274 18,-12c3.4418,-2.48071 15,-9 18,-13l1,-3l19,-19l4,-2" id="svg_7" stroke-width="5" stroke="#000000" fill="none"/>
 </g>
</svg>
This is my funny face
</body>
</html>

 

 

Additional Information

COP 4813 Lectures