051 SVG

27 Sep 2013

SVG or Scalable Vector Graphics is a language for describing two-dimensional graphics in XML. In this episode, we will explore various ways to draw different shapes, filters and gradients with SVG ending off with a little addition of interactivity by manipulating the SVG with JavaScript.

Download video: mp4

Sample code: Github

Version: SVG 1.1

Similar episodes: 014 Local Web Servers, 050 DOM

##Background on SVG 1. Specification - W3C Recommentation 1. SVG tutorial by MDN 1. SVG tutorial by Web Platform 1. SVG tutorial by Hong Kiat - why use SVG?

##Things to learn with SVG

###simple svg 1. read the SVG specification 1. mime type image/svg+xml with extension *.svg 1. create a file index.html with a simple embedded svg

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>SVG</title>
</head>
<body>

<svg>
  <line x1="0" y1="0" x2="200" y2="0" stroke-width="10" stroke="rgb(0,0,0)"/>
</svg>

</body>
</html>
``` 1. create another file called `line.svg` with similar contents. add on attributes for the tag `svg`

```
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="200" y2="0" stroke="black" stroke-width="10" />
</svg>
```

and amend the file `index.html`'s `body` tag

```
<img src="line.svg" >
```

slant the line in the file `line.svg` by changing the value of `y2`

```
<line x1="0" y1="0" x2="200" y2="50" stroke="black" stroke-width="5" />
```

amend the image size in the file `index.html`

```
<img src="line.svg" width=400>
```

###shapes and styling

all the below-mentioned code are embeded within the tags svg

  1. line

    slanted line

    ```

    ```

  2. polyline

    ```

    ```

  3. rectangle

    starting from origin

    ```

    ``` starting from another position

    ```

    ```

    curved corners

    ```

    ```

  4. circle

    simplest

    ```

    ```

    position starting from another place

    ```

    ```

    with stroke

    ```

    ```

  5. ellipse

    ```

    ```

  6. polygon

    ```

    ```

  7. path - specification

    ```

    ```

    curves

    ```

    ```

  8. text

    ```

    SVG

    ```

###filters

referenced elements be defined inside of a defs element

<svg>
    <defs>
    <filter id="fading">
        <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
    </filter>
    </defs>
    <rect x="100" y="100" width="400" height="100" style="fill:darkseagreen;" filter="url(#fading)"/>
    <rect x="95" y="95" width="400" height="100" style="fill:darkseagreen;stroke-width:5;stroke:black" />
</svg>

###gradients

<svg>
    <defs>
    <linearGradient id="sunrise" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
        <stop offset="50%" style="stop-color:orange;stop-opacity:1" />
        <stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
    </linearGradient>
    </defs>
    <circle r="100" cx="120" cy="120" fill="url(#sunrise)" />
</svg>

###building the project

  1. create a file index.html with h1 and its styling. open the file through a local web server and view it in the browser with the url example http://localhost:8000

    ``` <!doctype html>

    SVG

    Water Molecule

    ```

  2. download an svg from the noun project and play with it in the browser
  3. link it as an image to the current file index.html

    <img src="lab.svg"> make the image bigger/small

    <img src="lab.svg" width=400>

    add a class to it

    ... .small { margin: 0 0 0 20px; height: 70px; } ... <img src="lab.svg" class="small"> ...

  4. create svg covalent.svg, 3d.svg and link it

    ```

    ```

  5. for covalent.svg
    • create the <circle> for the various atomic shells
    • create the embedded css styling
    • grouping the red and green pairing electrons with the tag <g>
    • styling the red and green electrons
    • create the text
  6. for 3d.svg
    • create the 3 molecules with <circle>
    • create the radial gradients
    • grouping the red and green pairing electrons with the tag <g>
    • styling the red and green electrons
    • create the text
  7. add scripts to manipulate the file 3d.svg upon clicking
    • amend to object tag instead of img

      ```

      ```

    • add scripts to the file index.html - with a click it will change the size of the oxygen molecule

      ```

      svg.addEventListener(“load”,function(){ var svgDoc = svg.contentDocument; var oxygen = svgDoc.getElementsByTagName(‘circle’)[2]; oxygen.addEventListener(“click”,function() {

        if(oxygen.getAttribute('r') ==  100) {
          console.log('Inside: ' + oxygen);
          oxygen.setAttribute('r', 95);
        }
        else {
          oxygen.setAttribute('r', 100);
        }
      });   });   </script>   ```
      

##More Resources on SVG 1. Using SVG 1. Can i use SVG 1. RaphaelJS 1. Resolution Independence With SVG 1. Inkscape - open source vector graphics editor 1. SVG example with an animated eyeballs

##Credits 1. The Noun Project - Lab icon

##Build Link of this episode Nodeschool.io - interative command line based lessons made with Workshopper