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

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.

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.

SVG Scalability

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.

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

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.

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

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

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.

My First SVG

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>

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.

Rectangle

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

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.

Circle

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>

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.

Text

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>

Combined Shapes

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.

Generic Shape <svg width="200" height="200">           <path d="M 100 20 L 40 180 L 160 180 Z"         fill="orange" stroke="black" stroke-width="3" />           <path d="M 3 194 q 100 -380 192 0 Z" stroke="blue"   stroke-width="4" fill="none" />         </svg>

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.

Generic Shape

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

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>

Blur Effects

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>

Drop Shadows

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>

Gradients

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.

Complex Images

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: https://inkscape.org/en/ It is even possible to use online tools for SVG creation. Here you can find several links: https://www.sitepoint.com/6-free-web-based-svg-editors-compared/

More Information SVG tutorial: https://www.w3schools.com/graphics/svg_intro.asp Lots of information for web developers: https://developer.mozilla.org/en-US/docs/Web/SVG Full SVG specification: https://www.w3.org/TR/SVG11/

More Information All examples demonstrated in this presentation can be found here: http://cit230.sirvintos.net/svg.html Video of this presentation is here: http://cit230.sirvintos.net/presentation.html