A little SVG

• I would like to give an early graphics assignment.
• So we are going to take a quick look at a light-weight graphics environment SVG
• Scalable Vector Graphics
• These are XML documents which can be rendered by most web browsers.
• A reference is here, but there are many others.
• I am using SVG Essentials by Eisenberg from O'Reilly.
• XML file requirements
  • XML requires some minimal headers for operation.
  • an xlml tag is useful

  • <?xlm version="1.0"?>
           

  • A svg tag, with the following attributes
    • an xmlns tag, which tells the xml parser where to find the language definition which it will use to parse the rest of the file.
    • a width tag, the width of the image
    • a height tag, the height of the image.

    • <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1000"
              height="1000"
      >
      	   

    • The rest of the document, the graphics commands we need.
    • a closing svg tag.

  • Program commands.
    • There are many different graphics primitives, graphics manipulation and other commands, in this language.
    • For now, we will just look at two.
    • <line attributes/>
      • Documentation
      • Most basic form takes two coordinates.
      • It will draw a line between those two coordinates.
      • you also need to specify a color, or it will draw in white.
      • <line x1="10" y1="10" x2 ="90" y2="90" style="stroke:black;"/>
      • 
      • There are many other style attributes. which you may employ at your leisure.
    • <path attributes/>
      • The outline of a shape.
      • documentation
      • Draw lines along a path.
      • < path d="m 10 10 90 90" style="stroke:black;" />
      • This will accomplish the same task as before.
      • 
      • You can give multiple coordinates in a single data attribute
      • 
      • In this case I
        • Added a Z at the end of the data string to close the loop.
        • I could have done this by adding a 5 5 to the data string too
        • Added a fill="none", because it seemed to want to fill my polygon
  • A fractal project.
    • Fractals are shapes which are self-similar.
    • One simple, yet cool one is the Dragon Curve.
    • This if formed by replacing a line with two lines.
    • Step 0:
    • Step 1:
    • Step 2:
    • Step 3:
    • Note the direction changes each time a line is modified,
      • The first goes down.
      • The second goes up.
    • This can lead to some very nice pictures
    • 
    • 
    • 
  • To do this
    • I wrote a simple c++ program.
    • A driver, which creates the svg file.
    • A recursive routine that takes a vector of points and applies the dragon curve algorithm to each line in the vector.
      • find the midpoint of the line.
      • Use the line perpendicular to the given line to compute the new point.
        • M_new = -1/M_old
        • Distance is 1/2 of the original distance.
  • If you care
    • dragon.C