Home > Chapter Review and Exercises > Chapter 25 SVG Images

A Beginers Guide to SVG Video Series

1.A beginners guide to SVG _ Part One_ The Why, What, and How

2.How to create SVG shapes [ A beginners guide to SVG part 2 ]

3.What are SVG viewport and viewBox_ [ A beginners guide to SVG part 3 ]

4.How to create, clean up, and optimize an SVG [ A beginners guide to SVG part 4 ]

5.Animation with GSAP - the basics [ A beginners guide to SVG part 5 ]

Summary

In the past few years, SVG graphics have gone from a cutting-edge format with spotty browser support to a best practice for adding scalable images to responsive web pages. In this edition, SVG gets an entire chapter describing the SVG markup language, its remarkable features, how they can be used to add interactivity to a page, as well as tools and tips for creating them.  The chapter closes with instructions for how to make an SVG scale proportionally in a responsive layout.

Takeaways

In Chapter 25, students will learn the following: 

• That SVG images are made of vectors (not a grid of pixels), so they can scale up and down with no loss of quality.

• Those vectors are defined using the SVG markup language. A simple example shows how to establish the viewport dimensions, the use of shape elements (circle, rect, and path), a gradient fill, and text.

• More about XML, eXtensible Markup Language, a set of rules for creating other markup languages.

• That SVGs can contain embedded bitmapped images which can be clipped, masked, and altered with Photoshop-like filters.

• How to use the defs and symbol elements to create objects and effects that can be reused in the document, thus cutting down on redundant code and

keeping the file size in check.  

• Because SVG images are text documents with elements and attributes, you can access and manipulate their components with styles and scripts.

• Options for styling SVG elements:

1. Presentation attributes from the SVG language

2. Inline styles with the style attribute

3. An embedded style sheet in the SVG itself using the style element

4. A style sheet in the HTML document where the SVG is embedded with the svg element.

• JavaScript can be used to add interactivity and animation to SVG images.  SVGs may also be animated with effects from the SVG spec and CSS animation properties, although not as reliably.

• Some tools for creating SVGs include Adobe Illustrator, Inkscape (free), Boxy, and SVG-Edit. User interface tools such as Sketch, AdobeXD, and Affinity Designer are vector-based and can also save in SVG format.

• Best practices for optimizing SVG code, including measures you can take in image editing tools prior to export as well as using the optimization tool SVGO to further reduce the code they produce.  

• How to add an SVG to a page in a way that it resizes proportionally in a responsive layout using img, object, and inline with the svg element.

Key Terms in Chapter 25

SVG (Scalable Vector Graphics)

An XML markup language used to describe 2-D vector images.  It also refers to the file format of the images written in that language.

XML (eXtensible Markup Language)

A meta-language (set of rules) for creating other markup languages. SVG, MathML, and XHTML are examples of XML languages.

clipping

Using a vector shape to cut out a shape out of the area below it.  

masking

Using a gradient or bitmapped image to affect the transparency of the image area below it.

filter primitive

A very specific image effect (such as blur or saturate) that can be combined with other effects.

DRY (Don’t Repeat Yourself)

A coding approach that aims to be as efficient as possible and avoids redundant code.

SVG sprite

A technique in which multiple SVG drawings are defined in one SVG.  The use element pulls a particular symbol within the sprite onto the page.

XML Character Data Block NOTES

  In XML documents, a method for wrapping executable code in the script element so the <, >, and & symbols are parsed correctly:

<![CDATA[

//script here

]]>

SMIL (Synchronized Multimedia Integration Language)

An XML language for creating synchronized audio, video, and animated elements.  It is not well supported.

aspect ratio

The ratio of width to height.

viewport

Defined by the width and height attributes on the svg element, it forms a sort of window through which you see the drawing.

viewbox

The canvas on which the SVG is drawn (also called the user space), with its own coordinate system.  The viewbox may or may not be the same as the viewport that contains it.

viewport coordinate system

The set of coordinates used by the viewport, with 0 starting in the top-left corner and increasing to the right and downward.

user coordinate system

The set of coordinates used by the drawing space (user space) that is independent of the viewport coordinates.

adaptive icons

Icons that dynamically change design based on their size, with very simplified versions used at small sizes and more detailed versions for larger instances.

Chapter 25 Exercise

Here are some ideas for learning about SVG images:

• Create simple SVG images. This can be a great way for you to get a feel for the basics of SVG syntax and how to create shapes and paths.  Some simple SVG images that you could create include basic shapes like circles, squares, and triangles, as well as more complex images like flowers, animals, and objects.

• Explore different SVG attributes. SVG images can have a variety of attributes that can be used to control their appearance and behavior.  Some of the most common SVG attributes include fill, stroke, stroke-width, and opacity.  You can experiment with different values for these attributes to see how they affect the appearance of their SVG images.

• Use SVG images in web pages. Once you have created some basic SVG images, you can start to use them in web pages.  To do this, you will need to learn how to embed SVG images in HTML.  Once an SVG image is embedded in a web page, it can be resized, rotated, and positioned just like any other element on the page.

• Create interactive SVG images. SVG images can be made interactive by adding event handlers to them.  Event handlers are functions that are called when a certain event occurs, such as when the user clicks on an image.  You can use event handlers to create SVG images that respond to user input.  For example, they could create an SVG image of a button that changes color when the user clicks on it.

• Use SVG images for data visualization. SVG images can be used to create beautiful and informative data visualizations. You can use SVG to create charts, graphs, and other types of data visualizations that can be used to communicate information to others.

These are just a few ideas for learning about SVG images. With a little creativity, you can use SVG to create a variety of different types of images and graphics.

A Lesson Plan for SVG Images:

Objectives:

• Students will be able to define SVG images.

• Students will be able to create simple SVG images.

• Students will be able to use SVG images in web pages.

Materials:

• Computers with internet access

• A text editor or an SVG editor

Procedure:

1. Introduction:

• Begin by asking students what they know about SVG images.

• Explain that SVG stands for Scalable Vector Graphics.

• SVG images are made up of shapes and paths, which can be resized and manipulated without losing quality.

2. Creating Simple SVG Images:

• Next, show students how to create simple SVG images.

• You can use a text editor or an SVG editor to create SVG images.

• To create a simple SVG image, start by drawing a shape.

• For example, you could draw a circle or a square.

• Once you have drawn a shape, you can add attributes to it.

• Attributes are used to control the appearance of the shape.

• For example, you could use the fill attribute to change the color of the shape.

• You could also use the stroke attribute to add a border to the shape.

3. Using SVG Images in Web Pages:

• Once you have created some SVG images, you can use them in web pages.

• To do this, you will need to embed the SVG images in HTML.

• You can embed an SVG image in HTML by using the following code:

Code snippet

<img src="my-image.svg" alt="My Image">

4. Conclusion:

• To conclude, review the main points of the lesson.

• Answer any questions that students may have.

Assessment:

• To assess student learning, you can have them create their own SVG images.

• You can also have them use SVG images in web pages.