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>
|