SVG Graphics Explained in 100 Seconds - with Code Examples (video, just over 100 seconds...)
Fireship has embarked on an intriguing journey into the world of vector graphics by discussing Scalable Vector Graphics (SVG). SVG is an image format that acts like HTML for 2D graphics, unlike raster images, such as PNG or JPEG, which consist of a grid of pixels. When you zoom into a raster image, the pixels become larger, and the image loses its quality. Conversely, a vector image can be scaled to any size without losing definition because its appearance is based on geometry. The author encourages creating SVGs using tools like Figma or Illustrator, though it can also be done by directly writing code, which opens the door to animation and interactivity.
In this video, Fireship provides specific examples of how to create SVG graphics. To start, one must open an SVG tag and then define a coordinate system using the viewbox attribute. This allows for drawing basic shapes like rectangles, circles, and polygons. The author explains in detail how to position a rectangle by defining its XY values on the coordinate system and assigning it a size, which can be either fixed or responsive. One can also change the color of the shape through the fill attribute and refine its outline with the stroke attribute.
Fireship further explains that if the styling gets too complex, we can extract everything into a separate CSS stylesheet. By applying classes, we have the full power of CSS, which lets us react to events on the shapes and adjust their styling or animation. This makes SVGs incredibly flexible for creating more sophisticated artwork that goes beyond basic shapes.
For intricate artwork, the path element comes into play. The shape of a path is determined by one attribute, D, which is used for drawing. Coding a path is akin to controlling the tip of a pen with a series of commands. The initial command is M, which moves the pen tip to an XY coordinate. Uppercase letters indicate movement relative to the viewbox, and lowercase letters mean movement relative to the last point in the path. The video also discusses how to draw curves using the C and Q commands, and how SVG automatically calculates a smooth curve for you.
Finally, Fireship invites viewers to subscribe to the channel by clicking the like button, encouraging them to view more short videos like this. At the time of writing this article, the video had garnered 955315 views and 44396 likes, illustrating a substantial interest in this topic within the community.
Toggle timeline summary
-
Introduction to Scalable Vector Graphics (SVG) as a 2D image format similar to HTML.
-
Explanation of the difference between vector images and raster images, highlighting the pixelation issue.
-
Vector images can be scaled without resolution loss due to their geometric nature.
-
Creation of SVGs can be done with design tools or by coding.
-
Basics of defining an SVG with a viewbox for drawing graphics.
-
Instructions on drawing shapes using SVG elements like rectangle, circle, and polygon.
-
CSS can be used to style SVG shapes, allowing for complex styling.
-
Interaction and event handling with SVG shapes using CSS classes.
-
Introduction to the path element for complex artwork in SVG.
-
Coding a path in SVG involves controlling a pen tip with commands.
-
Commands to draw lines and curves, emphasizing the use of commands like L, C, and Q.
-
Summary of what has been covered in 100 seconds about SVG.
-
Invitation to like and subscribe for more content.
Transcription
Scalable Vector Graphics, or SVG, is an image format that's like HTML for 2D graphics. They differ from raster images, like PNG or JPEG, that use a grid of tiny pixels to create an image. And as you zoom in, the pixels become larger, making the image grainy. In contrast, a vector image can be scaled to any size without losing its resolution. Because instead of fixed pixels, its appearance is based on geometry. You can create SVGs with tools like Figma or Illustrator. Or, by writing the code directly, which is easier than you might think, and opens the door to animation and interactivity. Create one by opening an SVG tag, then define a coordinate system with the viewbox attribute. That gives us a frame with a width and height of 100 units on which we can draw graphics. Draw basic shapes by adding elements like rectangle, circle, and polygon. Position the rectangle by defining its XY value on the viewbox. Then give it a size, which can take values that are either explicit or responsive. We can change the color of the shape by defining its fill, or define an outline with the stroke attribute. And if our styling gets too complex, we can extract everything into a separate CSS style sheet. By applying a class to it, just like any HTML element, we have the full power of CSS at our fingertips. Which means we can react to events on the shapes, and then change their styling or animation accordingly. But most graphics are more than just basic shapes. They contain complex artwork with all kinds of twists and turns. And that's where the path element comes in. The shape of a path is determined by one attribute, D, for draw. Coding a path is like controlling the tip of a pen with a series of commands. The most basic command is M for move, which will move the pen tip to an XY coordinate. An uppercase letter means move relative to the viewbox, and lowercase means move relative to the last point in the path. But move doesn't actually draw anything. To put the pen tip down on the paper and draw something, use the L command. It works exactly like move, but draws a line that can be styled. Straight lines are cool, but what if we wanted to add a curve like we would with the handles in Illustrator? Create bezier curves with the C and Q commands. Define the position of two control points, then the X and Y coordinates where the curve should end. Then SVG will automatically calculate a smooth curve for you at any scale. This has been Scalable Vector Graphics in 100 seconds. If you want to see more short videos like this, hit the like button and subscribe. Thanks for watching, and I will see you in the next one.