Lesson 08-HTML5 SVG technology application

SVG attributes

SVG (Scalable Vector Graphics) elements have many attributes that define the appearance, position, transformation, interaction and other characteristics of graphics.

Basic graphics attributes

  • width and height: Define the width and height of the SVG element or graphic.
  • x and y: Define the position of the graphic in the coordinate system, usually used for elements such as <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>.
  • rx and ry: For rectangles (<rect>), define the corner radius.
  • cx and cy: For circles (<circle>) and ellipses (<ellipse>), define the center point coordinates.
  • r: For circles (<circle>), define the radius; for <radialGradient>, define the radial radius of the gradient.
  • fx and fy: For <radialGradient>, define the focus coordinates.
  • points: For polylines (<polyline>) and polygons (<polygon>), define a series of point coordinates that form the shape outline.

Fill and stroke

  • fill: Defines the fill color inside the shape. It can be a color name, hexadecimal, RGB/RGBA, HSL/HSLA value, or none to indicate no fill or a reference to <gradient> or <pattern>.
  • fill-opacity: Controls the transparency of the fill color.
  • stroke: Defines the stroke color of the shape edge, the property value is similar to fill.
  • stroke-width: The thickness of the stroke.
  • stroke-linecap: The stroke cap style, which can be set to butt, round or square.
  • stroke-linejoin: stroke intersection style, such as miter, round, or bevel.
  • stroke-miterlimit: limit the length of the miter to prevent sharp corners from overextending.
  • stroke-dasharray and stroke-dashoffset: define dash patterns (gap and segment length) and starting offsets.
  • stroke-opacity: control the transparency of the stroke color.

Transformations and Positioning

  • transform: apply a series of transformations (such as rotation, scaling, translation, skewing) to an element.
  • viewBox: define a viewport for the SVG element, allowing the shape to remain proportional in containers of different sizes.
  • preserveAspectRatio: control how the SVG shape is aligned and scaled between the viewBox and the actual viewport.

Filters and Effects

  • filter: Reference a <filter> element to add filter effects to graphics, such as blur, shadow, color adjustment, etc.

Text-related attributes

  • font-family: Set the font family of the text.
  • font-size: The font size of the text.
  • font-weight and font-style: Control the weight and style of the text (such as italics).
  • text-anchor: The alignment of text on the path, such as start, middle or end.
  • letter-spacing and word-spacing: The spacing between letters and words.
  • text-decoration: Text decoration, such as underline, overline or line-through.

Animation and Interaction

  • id: Give an element a unique identifier for CSS selectors or JavaScript operations.
  • class: Add a class name to the element to facilitate batch style settings or script processing.
  • style: Inline CSS style attributes.
  • on* event attributes: such as onclick, onmouseover, etc., used to add interactive behaviors.
  • <animate> and <animateTransform> elements: define SVG animations, including attribute changes and transformation animations.

Others

  • opacity: Overall control of the opacity of the element.
  • clip-path: Define the clipping area by referencing <clipPath> and hide the content outside.
  • mask: Define the mask effect by referencing <mask>, and determine the visibility of the element based on the transparency of the mask image.
  • pointer-events: Control whether the element responds to mouse or other pointer device events.

SVG image drawing

SVG path

Basic structure of the path

SVG path is a basic graphic element used in SVG (Scalable Vector Graphics) to describe complex shapes or lines. A path consists of a series of commands that define the path’s constituent lines, curves, arcs, polylines, etc., and determine their position, direction, and shape in the SVG coordinate space. Path commands can describe geometric shapes very accurately, making them a powerful tool for drawing arbitrary vector graphics.

<path d="M 100 100 L 200 200 Q 300 150 400 200 Z" />

Path Commands

Path commands are represented by one or two letters (uppercase or lowercase) followed by a list of parameters. Commands are divided into two categories: absolute coordinate commands and relative coordinate commands. Uppercase letters represent absolute coordinates, and lowercase letters represent relative coordinates relative to the previous point.

Basic commands:

  • M/m (moveto): Defines the starting point of a path or creates a new subpath in a path. Followed by two parameters (x, y), representing the coordinates of the new point.
  • L/l (lineto): Draw a straight line from the current point to the specified point. Followed by two parameters (x, y), indicating the coordinates of the end point of the line.
  • H/h (horizontal lineto): Draw a horizontal line from the current point to the specified x coordinate.
  • V/v (vertical lineto): Draw a vertical line from the current point to the specified y coordinate.
  • Z/z (closepath): Close the current path, that is, draw a straight line from the current point to the starting point of the path to form a closed figure.

Curve command:

  • C/c (cubic Bézier curve): Draw a cubic Bézier curve. Followed by six parameters (x1, y1, x2, y2, x, y), indicating the coordinates of the two control points and the end point respectively.
  • S/s (smooth cubic Bézier curve): Draw a smooth cubic Bézier curve. If the previous command is C or S, the first control point is symmetrical to the second control point of the previous curve; otherwise, the point coincides with the current point. It is followed by four parameters (x2, y2, x, y), indicating the coordinates of the second control point and the end point.
  • Q/q (quadratic Bézier curve): Draw a quadratic Bézier curve. It is followed by four parameters (x1, y1, x, y), indicating the coordinates of a control point and the end point respectively.
  • T/t (smooth quadratic Bézier curve): Draw a smooth quadratic Bézier curve. If the previous command is Q or T, the control point is symmetrical to the control point of the previous curve; otherwise, the point coincides with the current point. It is followed by two parameters (x, y), indicating the coordinates of the end point.

Arc command:
A/a (elliptical arc): Draw an elliptical arc. It is followed by seven parameters (rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y), which respectively represent the radius of the ellipse (rx, ry), the rotation angle, whether to draw a large arc, the arc direction (clockwise or counterclockwise), and the end point coordinates.

Path Example

A simple SVG path example that describes a triangle:

<path d="M 100 100 L 200 100 L 200 200 Z" fill="blue" />

Explanation:

  • M 100 100: Move to point (100, 100), which is the first vertex of the triangle.
  • L 200 100: Draw a straight line from the current point to point (200, 100) to form the second side.
  • L 200 200: Draw a straight line from the current point to point (200, 200) to form the third side.
  • Z: Close the path, draw a straight line from the last point back to the starting point (100, 100), and form a closed triangle.

Path animation

SVG paths can be dynamically displayed with CSS animation or SMIL animation. Through animation properties such as stroke-dasharray and stroke-dashoffset, you can simulate the effect of the path being drawn segment by segment to achieve “drawing animation”.

For example, the following CSS code implements path animation:

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-path 5s linear forwards;
}

@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

This code sets the path to be dashed initially (stroke-dasharray) and fully offset (stroke-dashoffset). The draw-path animation gradually reduces the offset so that the path appears to be “drawn” from beginning to end.

SVG Rectangle

Basic Structure

In an SVG document, the basic structure of a rectangle element is as follows:

<rect x="x coordinate" y="y coordinate" width="width" height="height" [other attributes] />

Where the x and y attributes define the coordinates of the top left corner of the rectangle, and width and height specify the width and height of the rectangle, respectively. For example:

<rect x="50" y="50" width="200" height="100" />

Rectangle Attributes

In addition to the basic positioning and sizing attributes, SVG rectangles support the following attributes:

  • rx and ry: Define the radius of the rectangle’s corners. If only rx is specified, ry is equal to it; if both are specified, they control the horizontal and vertical radius of the four corners of the rectangle respectively, forming a rounded rectangle. For example:
<rect x="50" y="50" width="200" height="100" rx="20" />

fill: Defines the fill color or gradient inside the rectangle. It can be a color name, hexadecimal, RGB/RGBA, HSL/HSLA value, or none for no fill or a reference to <gradient> or <pattern>.

  • fill-opacity: Controls the transparency of the fill color.
  • stroke: Defines the stroke color of the rectangle edge, the property value is similar to fill.
  • stroke-width: The thickness of the stroke.
  • stroke-linecap: The stroke cap style, which can be set to butt, round or square.
  • stroke-linejoin: stroke intersection style, such as miter, round or bevel.
  • stroke-miterlimit: limit the length of the miter to prevent sharp corners from overextending.
  • stroke-dasharray and stroke-dashoffset: define the dash style (gap and segment length) and starting offset.
  • stroke-opacity: control the transparency of the stroke color.
  • transform: apply a series of transformations (such as rotation, scaling, translation, skewing) to the rectangle.
  • id and class: used to identify and style the rectangle.
  • style: inline CSS style attributes.
  • on* event attributes: such as onclick, onmouseover, etc., used to add interactive behaviors.

Example

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </linearGradient>
  </defs>

  <rect x="50" y="50" width="200" height="100"
        rx="20" ry="20"
        fill="url(#gradient)"
        stroke="#000"
        stroke-width="2"
        stroke-dasharray="5, 5"
        stroke-opacity="0.8" />
</svg>

This example draws a rectangle with a top left corner at (50, 50), a width of 200×100 pixels, and a 20-pixel rounded corner. The interior of the rectangle is filled with a linear gradient from red to green, with a black stroke of 2 pixels, a dashed style, and a certain degree of transparency.

Animation

SVG rectangles can be dynamically displayed through CSS animation or SMIL animation. For example, you can animate the size, position, color, transparency, and other properties of the rectangle, or apply transformations (such as rotation and scaling) to achieve animation effects.

SVG Circle

Circles in SVG (Scalable Vector Graphics) are defined and drawn using the <circle> element. The <circle> element provides several key attributes to control the size, position, fill, stroke, and other characteristics of the circle.

Basic structure

<circle cx="center x coordinate" cy="center y coordinate" r="radius" [other attributes] />

Among them, the cx and cy attributes define the center coordinates of the circle, and the r attribute specifies the radius of the circle. For example:

<circle cx="100" cy="75" r="50" />

This will draw a circle with a center at (100, 75) and a radius of 50 pixels.

Circle attributes

In addition to the basic center coordinates and radius attributes, SVG circles also support the following attributes:

  • fill: Defines the fill color or gradient inside the circle. It can be a color name, hexadecimal, RGB/RGBA, HSL/HSLA value, or none for no fill or a reference to <gradient> or <pattern>.
  • fill-opacity: Controls the transparency of the fill color.
  • stroke: Defines the stroke color of the circle edge, the property value is similar to fill.
  • stroke-width: The thickness of the stroke.
  • stroke-linecap: The stroke end style, which is invalid for circles (because there are no ends).
  • stroke-linejoin: The stroke intersection style, which is also invalid for circles (because there are no intersections).
  • stroke-miterlimit: Same as above, invalid for circles.
  • stroke-dasharray and stroke-dashoffset: Define the dash style (gap and segment length) and the starting offset.
  • stroke-opacity: Controls the transparency of the stroke color.
  • transform: Apply a series of transformations (such as rotation, scaling, translation, skewing) to the circle.
  • id and class: Used to identify and style the circle.
  • style: Inline CSS style attribute.
  • on* event attributes: such as onclick, onmouseover, etc., used to add interactive behaviors.

Example

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="100" r="50"
          fill="url(#gradient)"
          stroke="#000"
          stroke-width="2"
          stroke-dasharray="5, 5"
          stroke-opacity="0.8" />
</svg>

This example draws a circle with a center at (150, 100) and a radius of 50 pixels. The inside of the circle is filled with a radial gradient from red to green, and the stroke is black, 2 pixels wide, dashed, and has a certain degree of transparency.

Animation

SVG circles can be animated using CSS animation or SMIL animation. For example, you can animate the size, position, color, transparency, and other properties of the circle, or apply transformations (such as rotation and scaling) to achieve animation effects.

SVG ellipse

Ellipses in SVG (Scalable Vector Graphics) are defined and drawn using the <ellipse> element. The <ellipse> element provides several key attributes to control the size, position, fill, stroke, and other properties of the ellipse.

Basic structure

In SVG documents, the basic structure of an ellipse element is as follows:

<ellipse cx="center x coordinate" cy="center y coordinate" rx="horizontal radius" ry="vertical radius" [other attributes] />

Among them, the cx and cy attributes define the center coordinates of the ellipse, and rx and ry specify the horizontal radius and vertical radius of the ellipse respectively. For example:

<ellipse cx="150" cy="100" rx="100" ry="50" />

This will draw an ellipse with a center at (150, 100), a horizontal radius of 100 pixels, and a vertical radius of 50 pixels.

Ellipse attributes

In addition to the basic center coordinates and radius attributes, SVG ellipses also support the following attributes:

  • fill: Defines the fill color or gradient inside the ellipse. Can be a color name, hexadecimal, RGB/RGBA, HSL/HSLA value, or none for no fill or a reference to <gradient> or <pattern>.
  • fill-opacity: Controls the transparency of the fill color.
  • stroke: Defines the stroke color of the ellipse edge, similar to fill.
  • stroke-width: The thickness of the stroke.
  • stroke-linecap: The stroke end style, invalid for ellipse (because there is no end).
  • stroke-linejoin: The stroke junction style, also invalid for ellipse (because there is no junction).
  • stroke-miterlimit: Same as above, invalid for ellipse.
  • stroke-dasharray and stroke-dashoffset: Define the dash style (gap and segment length) and the starting offset.
  • stroke-opacity: Controls the transparency of the stroke color.
  • transform: Apply a series of transformations (such as rotation, scaling, translation, skewing) to the ellipse.
  • id and class: Used to identify and style the ellipse.
  • style: Inline CSS style attributes.
  • on* event attributes: Such as onclick, onmouseover, etc., used to add interactive behaviors.

Example

<svg width="300" height="200">
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </radialGradient>
  </defs>

  <ellipse cx="150" cy="100" rx="100" ry="50"
           fill="url(#gradient)"
           stroke="#000"
           stroke-width="2"
           stroke-dasharray="5, 5"
           stroke-opacity="0.8" />
</svg>

This example draws an ellipse with a center at (150, 100), a horizontal radius of 100 pixels, and a vertical radius of 50 pixels. The inside of the ellipse is filled with a radial gradient from red to green, and the stroke is black, 2 pixels wide, and dashed. The stroke has a certain degree of transparency.

Animation

SVG ellipses can be displayed dynamically through CSS animation or SMIL animation. For example, you can animate the size, position, color, transparency, and other attributes of the ellipse, or apply transformations (such as rotation and scaling) to achieve animation effects

SVG polygons

The polygons in SVG (Scalable Vector Graphics) are defined and drawn through the <polygon> element. The <polygon> element uses a point set (points) attribute to specify the coordinates of each vertex of the polygon, thereby constructing the desired polygon shape.

Basic structure

In SVG documents, the basic structure of polygon elements is as follows:

<polygon points="vertex1x,vertex1y vertex2x,vertex2y ... vertexnx,vertexny" [other attributes] />

The points attribute value is a space-separated series of coordinate pairs, each pair representing the x-axis and y-axis coordinates of a polygon vertex. For example:

<polygon points="20,10 .jpg" alt="Polygon example" style="width: .png" />

This will draw a quadrilateral consisting of four vertices (20, 10), (30, ½), (40, 10) and (30, 20).

Polygon attributes

In addition to the basic vertex coordinate collection attributes, SVG polygons also support the following attributes:

  • fill: Defines the fill color or gradient inside the polygon. Can be a color name, hexadecimal, RGB/RGBA, HSL/HSLA value, or none for no fill or a reference to a <gradient> or <pattern>.
  • fill-opacity: Controls the transparency of the fill color.
  • stroke: Defines the stroke color of the polygon edge, similar to fill.
  • stroke-width: The thickness of the stroke.
  • stroke-linecap: The stroke cap style, can be set to butt, round or square.
  • stroke-linejoin: The stroke join style, such as miter, round or bevel.
  • stroke-miterlimit: Limits the length of the miter to prevent sharp intersections from overextending.
  • stroke-dasharray and stroke-dashoffset: Define the dash style (gap and segment length) and the starting offset.
  • stroke-opacity: Controls the transparency of the stroke color.
  • transform: Apply a series of transformations (such as rotation, scaling, translation, skewing) to the polygon.
  • id and class: Used to identify and style the polygon.
  • style: Inline CSS style attributes.
  • on* event attributes: Such as onclick, onmouseover, etc., used to add interactive behaviors.

Example

<svg width="300" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#00FF00" />
    </linearGradient>
  </defs>

  <polygon points="50,50 150,50 100,150"
           fill="url(#gradient)"
           stroke="#000"
           stroke-width="2"
           stroke-dasharray="5, 5"
           stroke-opacity="0.8" />
</svg>

This example draws a triangular polygon with three vertices (50, 50), (150, 50), and (100, 150). The polygon is filled with a linear gradient from red to green, and the stroke is black, 2 pixels wide, dashed, and has a certain degree of transparency.

Animation

SVG polygons can be dynamically displayed through CSS animation or SMIL animation. For example, you can animate the vertex coordinates, size, position, color, transparency, and other attributes of the polygon, or apply transformations (such as rotation and scaling) to achieve animation effects.

SVG Curves

The curves in SVG (Scalable Vector Graphics) include quadratic Bezier Curves, cubic Bezier Curves, and elliptical arcs. These curve types enrich the expressiveness of SVG paths, allowing the creation of smooth transitions, complex shapes, and precise control of curve shapes.

Second-order Bezier curve (Q / q)

A second-order Bezier curve is defined by a start point, an end point, and a control point. The control point affects the curvature and direction of the curve.

Absolute coordinate format (Q):

<path d="M x1, y1 Q x2, y2 x3, y3" />
  • (x1, y1) is the current point or the starting point of the path.
  • (x2, y2) is the control point, which determines the shape of the curve from the current point to the end point.
  • (x3, y3) is the end point, where the curve ends.

Relative coordinate format (q):

<path d="M x1, y1 q dx2, dy2 dx3, dy3" />

–(dx2, dy2) and (dx3, dy3) are the coordinate differences of the control point and the end point relative to the current point.

Third-order Bezier curve (C / c)

The third-order Bezier curve is more complex than the second-order Bezier curve. It is defined by a start point, an end point and two control points. These two control points affect the shape of the curve from the start point to the middle part and from the middle to the end point respectively.

Absolute coordinate format (C):

<path d="M x1, y1 C x2, y2 x3, y3 x4, y4" />
  • (x1, y1) is the current point or the starting point of the path.
  • (x2, y2) and (x3, y3) are the two control points that affect two segments of the curve respectively.
  • (x4, y4) is the end point where the curve ends.

Relative coordinate form (c):

<path d="M x1, y1 c dx2, dy2 dx3, dy3 dx4, dy4" />

(dx2, dy2), (dx3, dy3) and (dx4, dy4) are the coordinate differences of the two control points and the end point relative to the current point.

Arc (A / a)

An arc is a curve drawn along a portion of an ellipse or circle. It requires more parameters to define:

Absolute coordinate form (A):

<path d="M x1, y1 A rx, ry x-axis-rotation large-arc-flag, sweep-flag x2, y2" />
  • (x1, y1) is the current point or the path start point.
  • rx and ry are the horizontal and vertical radii of the ellipse.
  • x-axis-rotation is the rotation angle (in degrees) of the ellipse relative to the x-axis.
  • large-arc-flag is a boolean value (0 or 1) that determines whether to take a larger arc segment.
  • sweep-flag is a boolean value (0 or 1) that determines whether the arc is clockwise or counterclockwise.
  • (x2, y2) is the end point of the arc.

Relative coordinate form (a):

<path d="M x1, y1 a rx, ry x-axis-rotation large-arc-flag, sweep-flag dx, dy" />

(dx, dy) is the difference in coordinates of the end point relative to the current point.

Example

Draw an SVG path containing a second-order Bezier curve, a third-order Bezier curve, and an arc:

<svg width="300" height="200">
    <path d="
    M 50,50 <!-- Starting point -->
    Q 100,.png 150,100 <!-- Second-order Bezier curve -->
    C 200,50 250,150 300,100 <!-- Third-order Bezier curve -->
    A .jpg 20 0 0 1 350,150 <!-- Arc -->
    " fill="none" stroke="black" />
</svg>

Animation

SVG curves can be dynamically displayed through CSS animation or SMIL animation. For example, you can animate the control points, end points, radius, rotation angle and other properties of a curve, or apply transformations (such as rotation and scaling) to achieve animation effects.

Course: Master HTML5 and CSS3: From Beginner to Advanced Developer
Share your love

Trending now

Exploring Web 3D Core Technologies Development
WebRTC Advanced Guide：Media, Transport & Architecture
WebSocket Deep Guide：Building High-Performance Realtime Systems
Micro Frontends & Serverless: Modular Web Development