1. Week 10 - HTML SVG Student: Vladislovas Karalius
Instructor: Tim Thayne
Class: CIT , BYU-Idaho Online Learning

2. What is SVG SVG stands for Scalable Vector Graphics.
SVG is an image format for vector graphics.
SVG defines vector-based graphics in XML format.
SVG is used to define graphics for the Web.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
SVG is a W3C recommendation.

3. SVG Advantages
SVG images have small file sizes. They can be created and edited with any text editor.
SVG images can be searched, indexed, scripted, and compressed.
SVG images are scalable to any size without losing clarity.
SVG images look great on high resolution displays. They also can be printed with high quality at any resolution.
Every element and every attribute in SVG images can be animated and styled with CSS.
SVG is an open standard.

4. SVG Scalability

5. SVG Application
Logos and icons. Most logos are vector-based. With SVG it is possible to use them at any size without compromising quality or taking up too much bandwidth.
Graphs. SVG is made from vector shapes, so it works very well for graphs and infographics.
Complex UI elements. Instead of using complex HTML and CSS it is possible to make a single, scalable SVG element.

6. SVG Downsides Limited support with old browsers.
Complicated artwork is slow to render.
It cannot replace complex bitmap graphics, e.g., photos.

7. SVG Usage
External file. SVG images can be used just like any other images embedding them with <img> tag:
<img src="images/logo.svg" alt="Logo" width="80">
Inline. It is possible to include the SVG code directly into HTML document between the <svg></svg> tags.
Both methods have their advantages and disadvantages. You can find more information here.
There are other ways to use SVG in your webpages, but it is outside the scope of this presentation. More information can be found here.

8. Practical Examples Let’s make some simple SVG images.
I will use inline SVG for these examples.

9. My First SVG <svg width="200" height="100">
          <rect width="120" height="60" fill="green" x="40" y="20" />
        </svg>

10. My First SVG
An SVG image begins with an <svg> element. It acts as a transparent container for the shapes or lines we want to display.
The width and height attributes of the <svg> element define the width and height of the SVG image.
The <rect> element is used to draw a rectangle. We give it a height and width, and give it an x and y offset from the container <svg> element.
The fill attribute refers to the color inside the rectangle. We set the fill color to green.
The closing </svg> tag closes the SVG image. Since SVG is written in XML, all elements must be properly closed!
I have added a gray border to the <svg> container element so you can see its boundaries.

11. My First SVG

12. Rectangle <svg width="200" height="100">
          <rect width="120" height="60" fill="green" x="40" y="20"
                stroke="red" stroke-width="4" rx="15" ry="15" />
        </svg>

13. Rectangle Let’s add more attributes to our basic shape:
The stroke and stroke-width attributes control how the outline of a shape appears.
rx and ry determine the corner radius of the rectangle.

14. Rectangle

15. Circle <svg width="200" height="100">
          <circle r="40" fill="green" cx="100" cy="50"
                stroke="red" stroke-width="4" />
        </svg>

16. Circle
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0).
The r attribute defines the radius of the circle.

17. Circle

18. Text <svg width="200" height="100">
          <text x="20" y="25" font-family="Arial" font-size="32"
                fill="green" stroke="red" stroke-width="1"
                transform="rotate(20 0 0)">
                SVG is cool!
          </text>
        </svg>

19. Text The <text> element is used to define a text.
As with other examples we define the x and y offset.
We also define the font size and the font family.
It is possible to add the stroke and stroke-width attributes.
We can rotate the text or use other transformations.

20. Text

21. Combined Shapes
Shapes can be combined. Notice how I used the <g></g> tags:
        <svg width="260" height="100">
          <g stroke="red" stroke-width="4">
            <circle r="40" fill="blue" cx="50" cy="50" />
            <circle r="40" fill="blue" cx="210" cy="50" />         
            <rect width="120" height="60" fill="green" x="70" y="20“ rx="15" ry="15" />
          </g>
          <text x="84" y="14" font-family="Arial" font-size="20" fill="yellow" transform="rotate(18 0 0)">
                SVG is cool!
          </text>
        </svg>

22. Combined Shapes

23. Generic Shape
So far we have reviewed some basic shapes. All these basic shapes can be created with a path element. The <path> SVG element is the generic element to define a shape.
The <path> element is the most powerful element in the SVG library of basic shapes. You can use it to create lines, curves, arcs and more.
Let’s look at the example.

24. Generic Shape <svg width="200" height="200">
          <path d="M L L Z"
        fill="orange" stroke="black" stroke-width="3" />
          <path d="M q Z" stroke="blue"
  stroke-width="4" fill="none" />
        </svg>

25. Generic Shape Some of the commands that are available for path data:
M = moveto
L = lineto
Q = quadratic Bézier curve
Z = closepath
All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
More information can be found here and here.

26. Generic Shape

27. Miscellaneous Possibilities
So far we have barely scratched the surface of all the SVG possibilities.
Let’s look briefly at some of the options.

28. Blur Effects <svg height="110" width="110"> <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

29. Blur Effects

30. Drop Shadows <svg height="120" width="120"> <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

31. Drop Shadows

32. Gradients <svg height="150" width="400"> <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

33. Gradients

34. Complex Images So far we have looked at simple examples.
However, SVG images can be much more complex
Let’s look at the following picture and its source code.
It is the coat of arms of Širvintos, my hometown.

35. Complex Images

38. Complex Images
As you can see that SVG code can get very complex. It is not feasible to write this code by hand. Fortunately, there are many vector graphic editors with SVG support available.
Major graphic design software, such as CorelDRAW or Adobe Illustrator, support SVG format.
Also there are free graphic software, such as Inkscape:
It is even possible to use online tools for SVG creation. Here you can find several links:

39. More Information SVG tutorial:
Lots of information for web developers:
Full SVG specification:

40. More Information
All examples demonstrated in this presentation can be found here:
Video of this presentation is here: