SVG in HTML5

Home / Topic / SVG in HTML5 / Introduction to SVG

Introduction to SVG

In this chapter, we will dive into the world of SVG (Scalable Vector Graphics), an XML-based graphic format that allows creating scalable vector images directly in the browser. Unlike raster image formats like JPEG or PNG, SVG does not lose quality when scaled, making it the ideal choice for graphics that need to adapt to different screen sizes and resolutions. Additionally, SVG is editable and accessible, meaning it can be manipulated with CSS and JavaScript to add styles and animations.

What is SVG and Why Use It?

SVG, or Scalable Vector Graphics, is a key technology in modern web design as it allows creating clear, precise, and scalable graphics. SVG uses mathematics to define its graphics, unlike bitmaps, which rely on individual pixels. This means that an SVG graphic can be expanded or reduced without losing quality, ideal for logos, icons, illustrations, and graphics on the web.

Basic Structure of an SVG File

SVG files are written in XML format, which means they are readable by both humans and machines. Below, we will see an example of a basic SVG file that contains a circle:

html

"In this code, we create an SVG element with a circle inside. The width and height of the SVG are set to 100, which establishes the area where the graphic will be drawn. Then, we add a circle element, defining the center at coordinates 50, 50 and a radius of 40. The circle has a black border of three pixels and a red fill."

Code Explanation

<svg width="100" height="100">: This is the container tag that defines a 100x100 pixels drawing area.
<circle cx="50" cy="50" r="40": Creates a circle. cx and cy define the coordinates of the circle's center, and r defines the circle's radius.
stroke="black" and stroke-width="3": Set the border color and thickness.
fill="red": Defines the fill color of the circle.

Common Elements in SVG

SVG includes a variety of elements to create different shapes. We will explore some of the most important ones:

Rectangle

A rectangle is defined with the <rect> tag and positioned using x and y coordinates at the upper-left corner.

html

"This code creates a rectangle in SVG. The rectangle has a width of 180 and a height of 80, positioned at 10, 10 from the upper-left corner of the SVG. The border is blue, with a thickness of three pixels, and the fill is yellow."

Line

The <line> element allows drawing a line between two specified points.

html

"Here we draw a line in SVG. The line starts at point 10, 10 and ends at 190, 90. It has a thickness of two pixels and is colored black."

Ellipse

Ellipses are similar to circles but allow defining different radii on the horizontal and vertical axes.

html

"This code creates an ellipse in SVG. The center is positioned at 100, 50, with a horizontal radius of 80 and a vertical radius of 40. The ellipse has a purple border and a pink fill."

The `<path>` Element for Complex Shapes

The <path> element is one of the most powerful tools in SVG, allowing the creation of complex shapes through drawing commands. Below is a basic example:

html

"In this example, path is used to create a curve. The letter M indicates the starting position at 10, 80. The letter C defines a cubic Bezier curve that passes through several points, and the letter S creates a smooth Bezier curve that connects with the previous curve."

Detailed Explanation of `<path>` Commands

M10 80: Moves the pen to position (10, 80) without drawing anything.
C 40 10, 65 10, 95 80: Draws a cubic Bézier curve starting at (10, 80) with control points at (40, 10) and (65, 10), and ending at (95, 80).
S 150 150, 180 80: Continues with a smooth Bézier curve connecting from the endpoint of the previous curve, ending at (180, 80).

This type of commands allows us to create customized and complex shapes, like logos and detailed graphics.

Benefits of Using SVG on the Web

Scalability: SVG adapts to any resolution without loss of quality.
Accessibility and Editing: Being a text-based format, SVG is editable and accessible, allowing easy modification with CSS and JavaScript.
Lightweight: Generally, SVG files are lighter than rasterized formats, enabling faster load times.

Conclusion

SVG is an essential tool for any web developer looking to incorporate dynamic and scalable graphics on their websites. Now that we have a basic understanding of SVG structure and main elements, we are ready to move forward. In the next chapter, we will explore the coordinate and positioning system in SVG, an essential skill for creating precise and organized graphics. See you in the next chapter!

Mark as read and continue

Ask me anything