# Week 6 - Introduction to SVG

Learning Objectives

By the end of this week, students will be able to:

Define Scalable Vector Graphics (SVG) and explain its advantages over traditional bitmap formats like PNG and JPEG.
Describe the steps necessary to optimize an Illustrator document for SVG export, including layer organization and naming conventions.
Demonstrate how to export SVG files from Adobe Illustrator, including setting the appropriate export options for web optimization.
Utilize tools like SVGO to further reduce SVG file sizes and clean up the code for improved web performance.
Apply CSS transitions and animations to SVG elements to create dynamic and interactive web graphics.

# Definition and Overview

Scalable Vector Graphics (SVG) is a versatile XML-based format designed for the web, enabling designers and developers to create vector images that are scalable to any size without losing quality. Unlike raster images, which store information in a grid of pixels, SVGs describe images in terms of paths, shapes, and fills. This vector-based approach ensures that SVG images remain crisp and clear at any resolution or zoom level, making them perfectly suited for the demands of modern responsive web design. SVGs support transparency and can be easily embedded directly into HTML documents, allowing for seamless integration with the rest of a web page's design.

# Advantages Over Other Image Formats

SVG files offer several key advantages compared to traditional bitmap formats such as PNG and JPEG:

Reduced File Sizes: For many types of web graphics, especially those that are geometric or consist of simple shapes like logos and icons, SVGs tend to have smaller file sizes. This efficiency is due to the XML-based format of SVGs, which describes an image using compact text instructions rather than storing individual pixel data. Smaller file sizes contribute to faster page load times, improving overall user experience and SEO performance.
Scalability: SVGs can be scaled up or down to fit any display size without losing quality. This feature is crucial for responsive design, where images must adapt to varying screen sizes and resolutions. With SVGs, a single image file works across all devices, from desktop monitors to smartphones, without the need for multiple versions of the same image at different resolutions.
Styling and Animation: SVGs can be directly manipulated using CSS and JavaScript, offering extensive possibilities for styling and interactive animation. Designers can change colors, apply gradients, add filters, or animate parts of an SVG image in response to user interactions, such as hover or click events. This capability allows for dynamic and engaging web experiences that are not possible with static image formats.
Accessibility and SEO Benefits: Since SVGs are XML files, they can include text-based metadata and titles, making the content of SVG images searchable by search engines and accessible to screen readers. This feature enhances the accessibility of web content for users with visual impairments and can contribute to better SEO by allowing search engines to index the textual content of images.

# Basic SVG Syntax and Elements

SVG syntax, being XML-based, shares similarities with HTML in its use of tags but is distinct in its focus on graphical elements. This syntax provides a powerful and flexible way to describe vector graphics in a text format that can be embedded directly into web pages.

Here is a quick video tutorial (opens new window).

# Overview of SVG Syntax

SVG syntax enables the definition of graphical elements, styles, and behaviors within an XML framework. Each SVG image is defined within an <svg> element, acting as a container that establishes a drawable region for vector graphics. Attributes on the <svg> element, such as width, height, and viewBox, control the size and scaling of the SVG content.

SVG graphics are drawn using a variety of elements that represent different types of shapes and paths:

<svg>: The root container for SVG content, defining the bounds and coordinate system of the SVG canvas.
<circle>: Defines a circle, requiring cx (x-coordinate of the center), cy (y-coordinate of the center), and r (radius) attributes.
<rect>: Represents a rectangle and requires x and y attributes to determine the position, as well as width and height to specify the size. Optional rx and ry attributes can round the corners.
<path>: Perhaps the most versatile SVG element, it uses a d (path data) attribute to define complex shapes and paths with a series of commands and parameters.

# Understanding SVG Coordinate System and viewBox

The SVG coordinate system and viewBox attribute play crucial roles in how SVG graphics are positioned and scaled:

Coordinate System: SVG uses a Cartesian coordinate system, with the origin (0,0) located at the top-left corner of the canvas. Coordinates are used to position and shape SVG elements within this space.
viewBox Attribute: This attribute, specified on the <svg> element, creates a "mini coordinate system" within the SVG. It allows for the scaling and positioning of SVG content relative to its container. The viewBox attribute takes four values: min-x, min-y, width, and height, defining a rectangle in the SVG's coordinate system that should be scaled to fit the <svg> element's dimensions.

<svg width="100" height="100" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" fill="blue" />
</svg>

1
2
3

In this example, a blue circle is centered within a 50x50 units square that is scaled to fit a 100x100 pixels area. The viewBox makes it possible to design SVG graphics that are responsive and adaptable to different display sizes without changing the SVG code.

# Embedding SVG in HTML

SVGs can be embedded directly into HTML documents in several ways, including inline SVG, using the tag, as object data, or as CSS backgrounds. Each method has its implications for accessibility, styling, and interactivity:

Inline SVG: Embedding SVG code directly into an HTML document allows for the SVG to be styled and scripted, making it fully interactive and accessible.
<img> Tag: SVG files can be referenced as the source in an tag. While this method is simple and ensures cacheability, it limits interaction and styling with CSS or JavaScript.
CSS Backgrounds: SVGs can be set as background images in CSS, useful for decorative purposes but not for direct interaction or accessibility.
Accessibility Considerations: When embedding SVG directly into HTML, it's possible to add title and desc tags for screen readers, making SVGs more accessible.

# Animating SVGs with CSS

Animating SVGs with CSS unlocks a wide array of possibilities for interactive and dynamic web designs. Here's how to bring SVGs to life using CSS animations and transitions.

# Introduction to CSS Animations and Transitions

CSS Animations and Transitions Source (opens new window)

Difference Between CSS Animations and Transitions: CSS transitions provide a way to control animation speed when changing CSS properties from one state to another over a specific duration. On the other hand, CSS animations offer more control for complex animations by allowing multiple keyframes to define an animation sequence from start to finish.
When to Use Transitions vs. Animations: Transitions are ideal for simple interactions, such as changing colors or sizes on hover. Animations are suited for more detailed sequences that may involve multiple steps or repeat cycles, like spinning icons or moving elements along a path.

# Using CSS Transitions with SVG

Basic Examples of CSS Transitions: Smoothly transition SVG properties, such as fill, stroke, and opacity, by applying CSS transitions. This can enhance interactivity, making SVG elements react to user actions like mouse hover.

svg circle {
  transition: fill 0.5s ease;
}

svg circle:hover {
  fill: #3498db;
}

1
2
3
4
5
6
7

Transitioning SVG Attributes: Enhance user experience by transitioning SVG attributes. For example, smoothly change the stroke width or color of an element upon user interaction to draw attention or provide feedback.

# Animating SVG with CSS Keyframes

Creating Complex Animations: Define detailed animations using @keyframes, which specify the animation sequence through multiple stages. You can animate SVG elements, creating sophisticated visual effects that capture user attention.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

svg {
  animation: spin 2s linear infinite;
}

1
2
3
4
5
6
7
8

Control Animation Timing, Duration, and Iteration: Fine-tune animations by adjusting the animation-duration, animation-timing-function, and animation-iteration-count properties. This allows for precise control over how animations play, their speed, and the number of times they repeat.

# Advanced SVG Animation Techniques

Combining CSS Animations with SVG Transformations: Apply CSS animations to SVG transformation properties like translate, rotate, and scale. This technique enables more dynamic and complex animations, such as moving elements along a path or creating spinning effects that enhance the visual appeal of your website.

@keyframes moveAndScale {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(30px) scale(1.5); }
  100% { transform: translateX(0) scale(1); }
}

svg rect {
  animation: moveAndScale 3s infinite;
}

1
2
3
4
5
6
7
8
9

Creating Interactive Animations: Leverage CSS pseudo-classes like :hover and :focus to trigger animations, making SVG elements respond to user interactions. This approach is excellent for creating engaging user interfaces where elements change appearance or behavior based on user actions.

# Exporting SVGs Using Adobe Illustrator

Creating SVGs with Adobe Illustrator is a streamlined process, ideal for designers looking to integrate vector graphics into web projects. Here's how to prepare, export, and optimize your SVGs for the web.

# Preparing Your Illustration for Export

Optimizing Your Illustrator Document: Before exporting your SVG, it's crucial to prepare your Illustrator document to ensure a smooth transition to the web. This preparation involves organizing your artwork with layers and groups logically. Use clear, descriptive naming conventions for layers and elements, as these names can be carried over into the SVG code, aiding in targeting elements for animation or styling. Additionally, simplify paths and merge unnecessary layers to reduce the complexity and file size of your SVG.

# Exporting SVGs from Illustrator

Export Options for SVG: When you're ready to export your SVG from Illustrator, navigate to File > Export > Export As... and select SVG (*.SVG) as the format. In the SVG options dialog, several settings can affect your file:
- Styling: Determines whether styles are defined within the SVG file or externally. Inline styles may be easier to manipulate directly within the file.
- Font: Convert text to outlines to preserve appearance without requiring the font to be installed on the user's system. Image Location: Embed images if your SVG contains any bitmap graphics to ensure they're always displayed. Decimal Places: Lower values can reduce file size but at the cost of precision. Typically, 1-3 decimal places are sufficient for web graphics.
- Minify: Reduce file size by removing unnecessary whitespace, comments, and other non-essential data.
- Responsive: Ensure your SVG scales correctly on different screen sizes by checking this option.

← Week 5 - Creating Icons and Typography in Illustrator Week 7 - Midterm →