8.6 Scalable vector graphics (SVG)

SVG is a powerful XML-based vector image format for creating high-quality, scalable graphics on the web. It uses mathematical equations to render images, allowing them to maintain quality at any size. This makes SVG ideal for responsive design and interactive web elements.

SVG offers advantages over raster images like smaller file sizes and editability of individual elements. It can be created using vector graphics editors or by writing XML code directly. SVG supports basic shapes, complex paths, text, and even embedded raster images.

Basics of SVG

• SVG (Scalable Vector Graphics) is an XML-based vector image format for creating high-quality, resolution-independent graphics on the web
• SVG uses mathematical equations and geometric shapes to render images, allowing them to scale without losing quality or becoming pixelated
• Advantages of SVG over raster images (JPEG, PNG) include smaller file sizes, infinite scalability, and the ability to edit individual elements within the image

XML-based vector image format

Top images from around the web for XML-based vector image format

• 

  View original

  Is this image relevant?

• 

  File:1200px-SVG logo.svg.png - Wiki.OSArch View original

  Is this image relevant?

• 

  Making beautiful SVG schematics View original

  Is this image relevant?

• 

  View original

  Is this image relevant?

• 

  File:1200px-SVG logo.svg.png - Wiki.OSArch View original

  Is this image relevant?

1 of 3

Top images from around the web for XML-based vector image format

• 

  View original

  Is this image relevant?

• 

  File:1200px-SVG logo.svg.png - Wiki.OSArch View original

  Is this image relevant?

• 

  Making beautiful SVG schematics View original

  Is this image relevant?

• 

  View original

  Is this image relevant?

• 

  File:1200px-SVG logo.svg.png - Wiki.OSArch View original

  Is this image relevant?

1 of 3

• SVG files are written in XML (eXtensible Markup Language), a human-readable and machine-parsable format
• XML structure allows for easy modification and manipulation of SVG elements using text editors or scripting languages
• SVG elements are defined using tags, attributes, and values, similar to HTML

Rendering of shapes and paths

• SVG renders basic shapes like rectangles, circles, ellipses, lines, and polygons using simple XML elements
• Complex shapes and curves are created using paths, which consist of a series of commands and coordinates
• SVG supports advanced rendering features like gradients, patterns, and filters for creating sophisticated visual effects

Advantages vs raster images

• SVG files are typically smaller than equivalent raster images, especially for simple graphics or logos
• SVG graphics maintain their clarity and sharpness at any scale or resolution, making them ideal for responsive web design
• Individual elements within an SVG can be styled, animated, or interacted with using CSS or JavaScript

Creating SVG images

• SVG images can be created using vector graphics editors (Adobe Illustrator, Inkscape) or by writing XML code directly
• Basic shapes are drawn using specific elements like

  <rect>

  ,

  <circle>

  ,

  <ellipse>

  ,

  <line>

  , and

  <polygon>

• More complex shapes and curves are created using the

  <path>

  element and a series of drawing commands

Drawing basic shapes

• Rectangles are drawn with the

  <rect>

  element, specifying the x, y coordinates, width, height, and optional rounded corners
• Circles are created using the

  <circle>

  element, defining the center point (cx, cy) and radius (r)
• Ellipses are drawn with the

  <ellipse>

  element, specifying the center point (cx, cy), horizontal radius (rx), and vertical radius (ry)
• Lines are created using the

  <line>

  element, defining the start (x1, y1) and end (x2, y2) coordinates
• Polygons are drawn with the

  <polygon>

  element, listing the points as a series of x, y coordinate pairs

Paths and Bézier curves

• The

  <path>

  element is used to create complex shapes and curves by defining a series of commands and coordinates
• Path commands include moveto (M), lineto (L), horizontal lineto (H), vertical lineto (V), curveto (C), smooth curveto (S), quadratic Bézier curve (Q), and more
• Bézier curves are parametric curves used to create smooth, organic shapes and are defined by control points that influence the curve's shape

Text in SVG

• Text is added to SVG using the

  <text>

  element, specifying the x, y coordinates for positioning
• Text can be styled using CSS properties like font-family, font-size, font-weight, and text-anchor
• The

  <tspan>

  element is used to apply different styles or positioning to parts of the text content
• SVG text supports advanced features like text paths, where text follows the shape of a path

Embedding raster images

• Raster images (JPEG, PNG) can be embedded within SVG using the

  <image>

  element
• The

  <image>

  element requires the xlink:href attribute to specify the image file path, along with x, y coordinates and width, height dimensions
• Embedded raster images can be styled, transformed, and masked like other SVG elements

SVG styling and appearance

• SVG elements can be styled using CSS properties or presentation attributes directly within the XML
• Fill and stroke properties define the appearance of shapes and paths
• Gradients, patterns, and transparency effects add visual depth and interest to SVG graphics

Fill and stroke properties

• The fill property sets the color or pattern used to paint the interior of shapes and paths
• Fill colors can be specified using color keywords, hexadecimal values, RGB/RGBA, or HSL/HSLA
• The stroke property defines the color, width, and style of the outline around shapes and paths
• Stroke properties include stroke-width, stroke-linecap (end cap style), stroke-linejoin (corner style), and stroke-dasharray (dashed line pattern)

Gradients and patterns

• SVG supports linear and radial gradients for creating smooth color transitions
• Linear gradients are defined with the

  <linearGradient>

  element, specifying the starting and ending coordinates and color stops
• Radial gradients are created using the

  <radialGradient>

  element, defining the center point, radius, and color stops
• Patterns are repeating graphical elements used to fill or stroke shapes, created with the

  <pattern>

  element

Transparency and opacity

• SVG elements can have varying levels of transparency using the opacity property or the fill-opacity and stroke-opacity properties
• Opacity values range from 0 (fully transparent) to 1 (fully opaque)
• Group opacity can be set using the opacity attribute on the

  <g>

  element, affecting all child elements

Filters and effects

• SVG filters allow for advanced visual effects like blurring, lighting, color adjustments, and more
• Filters are defined within the

  <defs>

  section using the

  <filter>

  element and applied to SVG elements using the filter attribute
• Common filter primitives include

  <feGaussianBlur>

  (blurring),

  <feColorMatrix>

  (color transforms),

  <feComponentTransfer>

  (channel adjustments), and

  <feMorphology>

  (erosion/dilation)

Interactivity with SVG

• SVG elements can be made interactive through the use of hyperlinks, scripting, and animation
• Hyperlinks allow users to navigate to other web pages or trigger actions by clicking on SVG elements
• Scripting with JavaScript enables dynamic manipulation of SVG elements and user interaction
• SVG animations can be created using CSS animations, SMIL (Synchronized Multimedia Integration Language), or JavaScript libraries

Adding hyperlinks

• Hyperlinks are added to SVG elements using the

  <a>

  element, wrapping the target element and specifying the href attribute with the destination URL
• The xlink:href attribute is used for older browsers, while the href attribute is supported in modern browsers
• Hyperlinks can be styled using CSS to change their appearance on hover or active states

Scripting and animation

• JavaScript can be used to manipulate SVG elements, modify their attributes, and respond to user events
• SVG elements can be selected and modified using JavaScript DOM methods like getElementById(), querySelector(), and setAttribute()
• CSS animations can be applied to SVG elements using the animation or transition properties, animating attributes like transform, opacity, or fill
• SMIL animations are defined within the SVG using elements like

  <animate>

  ,

  <animateTransform>

  , and

  <animateMotion>

  , specifying the target attribute, duration, and animation values

Accessibility considerations

• SVG graphics should be made accessible to users with disabilities by providing alternative text descriptions and ensuring keyboard navigation
• The

  <title>

  and

  <desc>

  elements can be used to provide short and long descriptions of the SVG, which are read by assistive technologies
• SVG elements should be logically grouped and given meaningful IDs and class names to aid in navigation and understanding
• ARIA (Accessible Rich Internet Applications) attributes can be added to SVG elements to provide additional context and roles for assistive technologies

Integrating SVG on the web

• SVG can be integrated into web pages using several methods, each with its own advantages and considerations
• Inline SVG allows for direct embedding of SVG code within the HTML, providing easy styling and scripting access
• The

  <object>

  and

  <img>

  tags can be used to include external SVG files, with different levels of scripting and styling control
• SVG can also be used as CSS background images, enabling the use of SVG patterns and responsive scaling

Inline SVG in HTML

• Inline SVG involves directly embedding the SVG code within the HTML document using the

  <svg>

  element
• Inline SVG allows for full control over styling and scripting, as the SVG elements are part of the same document tree as the HTML
• Inline SVG can increase the size of the HTML file, but enables caching and reduces additional HTTP requests

Using object and img tags

• The

  <object>

  tag can be used to embed external SVG files, specifying the file path in the data attribute
• Object elements allow for scripting and interaction with the SVG, as the SVG document becomes a part of the HTML document tree
• The

  <img>

  tag can also be used to include external SVG files, with the file path specified in the src attribute
• Image elements provide better compatibility with older browsers but limit scripting and styling control

CSS background images

• SVG files can be used as CSS background images using the url() function within the background or background-image properties
• SVG backgrounds can be scaled, positioned, and repeated like other image formats
• CSS properties like background-size and background-position can be used to control the SVG background's appearance and behavior
• SVG backgrounds are useful for creating repeating patterns, responsive logos, or decorative elements

Responsive SVG techniques

• SVG graphics are inherently responsive due to their vector nature, scaling without loss of quality
• Techniques like the preserveAspectRatio attribute and the viewBox attribute can be used to control the scaling behavior of SVG
• Media queries can be used to change SVG styles or swap between different versions of an SVG based on screen size or other conditions
• CSS transforms and relative units (percentages, em, rem) can be used to create responsive SVG layouts that adapt to different container sizes

SVG optimization techniques

• Optimizing SVG files is crucial for improving performance, reducing file sizes, and ensuring compatibility across browsers
• Techniques like minification, path simplification, and compression can significantly reduce SVG file sizes
• Proper use of CSS and JavaScript can help optimize the rendering and interaction performance of SVG graphics

Minimizing file size

• Removing unnecessary elements, comments, and metadata from SVG files can help reduce their size
• Tools like SVGO (SVG Optimizer) can automatically optimize SVG files by removing redundant or useless information
• Path data can be simplified using path simplification algorithms, reducing the number of points and commands without visually altering the graphic
• Gzip compression can be applied to SVG files to further reduce their size, as SVG is a text-based format

Performance considerations

• Avoid using excessive filters, gradients, or complex paths in SVG, as they can impact rendering performance, especially on mobile devices
• Use CSS styling instead of inline styles within the SVG whenever possible, as external stylesheets can be cached and reused
• Minimize the use of JavaScript for animating or manipulating SVG, as CSS animations and transitions are often more performant
• Consider using SVG sprites or icon fonts for frequently used icons or graphics, reducing the number of HTTP requests and improving loading times

Fallbacks for older browsers

• Older browsers may not fully support SVG or certain SVG features, so fallbacks should be provided when necessary
• The

  <foreignObject>

  element can be used to include alternate content (like PNG images) for browsers that do not support SVG
• Modernizr, a JavaScript library for feature detection, can be used to detect SVG support and conditionally load fallback content
• CSS background images can be used as a fallback for SVG, with the background-image property specifying multiple image formats in order of preference

SVG tools and resources

• A variety of tools and resources are available for creating, editing, optimizing, and working with SVG graphics
• Vector graphics editors like Adobe Illustrator and Inkscape provide powerful tools for designing and exporting SVG files
• Online SVG optimizers and compressors can help reduce file sizes and improve performance
• SVG libraries and frameworks offer pre-built components, icons, and utilities for working with SVG in web projects

Vector graphics editors

• Adobe Illustrator is a popular commercial vector graphics editor that supports creating and exporting SVG files
• Illustrator offers advanced tools for creating complex illustrations, logos, and graphics, with support for SVG-specific features like filters and gradients
• Inkscape is a free and open-source vector graphics editor that provides a wide range of tools for creating and editing SVG files
• Inkscape supports a variety of SVG features and offers a user-friendly interface for designers and developers

Online SVG optimizers

• SVGOMG is a web-based tool for optimizing SVG files, built on top of the SVGO library
• SVGOMG provides a visual interface for configuring optimization settings and previewing the results
• Other online tools like Compressor.io and SVG Minifier can also be used to compress and optimize SVG files

SVG libraries and frameworks

• D3.js (Data-Driven Documents) is a powerful JavaScript library for creating interactive data visualizations using SVG
• D3.js provides a wide range of tools for manipulating SVG elements, handling data binding, and creating complex animations and transitions
• Snap.svg is a lightweight JavaScript library for working with SVG, offering an easy-to-use API for creating, animating, and manipulating SVG graphics
• SVG.js is another lightweight JavaScript library for creating and manipulating SVG, with a simple and intuitive API and support for animations and interactivity
• Raphaël is a cross-browser JavaScript library that simplifies working with vector graphics, providing an API for creating and animating SVG and VML (for older IE versions)