Introduction to SVG: Concepts, Usage, and Detailed Attributes

SVG (Scalable Vector Graphics) is an XML-based vector graphics format widely used in web design and development. This article will provide a detailed introduction to the basic concepts, usage methods, and detailed attributes of SVG, along with some online learning websites and resources to help you quickly get started with SVG development.

What is SVG?

SVG is a markup language used to describe two-dimensional vector graphics. Unlike bitmap images, vector graphics use mathematical formulas to describe the shapes and positions of graphics, allowing for lossless scaling. SVG files are plain text files that can be embedded in HTML or used independently.

Advantages of SVG

  1. Lossless Scaling: SVG images remain clear at any resolution.
  2. Editable: SVG files are text files that can be edited with a text editor.
  3. Interactivity: SVG images can be dynamically manipulated and styled using JavaScript and CSS.
  4. Lightweight: SVG files are usually smaller than bitmap images, leading to faster load times.

Basic Usage of SVG

SVG images can be directly embedded in HTML or referenced as external files. Here are some basic usage methods:

Direct Embedding in HTML

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>SVG Example</title>
7
  </head>
8
  <body>
9
    <svg width="100" height="100">
10
      <circle
11
        cx="50"
12
        cy="50"
13
        r="40"
14
        stroke="black"
15
        stroke-width="3"
16
        fill="red"
17
      />
18
    </svg>
19
  </body>
20
</html>

Referencing External SVG Files

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>SVG Example</title>
7
  </head>
8
  <body>
9
    <img src="image.svg" alt="Example SVG Image" />
10
  </body>
11
</html>

Basic SVG Elements and Attributes

Common Elements

  1. <circle>: Defines a circle.
  2. <rect>: Defines a rectangle.
  3. <line>: Defines a line.
  4. <polyline>: Defines a series of connected lines.
  5. <polygon>: Defines a polygon.
  6. <path>: Defines an arbitrary shape path.
  7. <text>: Defines text.

Common Attributes

  1. width and height: Define the width and height of the SVG graphic.
  2. x and y: Define the position of the element.
  3. cx and cy: Define the center point of a circle.
  4. r: Defines the radius of a circle.
  5. rx and ry: Define the radii of an ellipse.
  6. points: Define the vertices of polygons and polylines.
  7. d: Defines the commands and parameters of a path.
  8. fill: Defines the fill color.
  9. stroke: Defines the stroke color.
  10. stroke-width: Defines the stroke width.

Element Example Code

<circle> Element

1
<svg width="100" height="100">
2
  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="2" fill="blue" />
3
</svg>

<rect> Element

1
<svg width="100" height="100">
2
  <rect
3
    x="10"
4
    y="10"
5
    width="80"
6
    height="80"
7
    stroke="white"
8
    stroke-width="3"
9
    fill="blue"
10
  />
11
</svg>

<line> Element

1
<svg width="100" height="100">
2
  <line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="3" />
3
</svg>

<polyline> Element

1
<svg width="100" height="100">
2
  <polyline
3
    points="10,10 50,50 90,10"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

<polygon> Element

1
<svg width="100" height="100">
2
  <polygon
3
    points="10,10 90,10 50,90"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="green"
7
  />
8
</svg>

<text> Element

1
<svg width="200" height="100">
2
  <text x="10" y="50" font-family="Verdana" font-size="35" fill="black">
3
    Hello, SVG!
4
  </text>
5
</svg>

<path> Element

The <path> element is one of the most powerful elements in SVG, used to draw arbitrary shape paths. It defines the path data through the d attribute, which contains a series of commands and parameters.

Common Commands

  1. M (moveto): Moves to a specified position without drawing a line.
  2. L (lineto): Draws a straight line from the current point to a specified position.
  3. H (horizontal lineto): Draws a horizontal line from the current point to a specified x-coordinate.
  4. V (vertical lineto): Draws a vertical line from the current point to a specified y-coordinate.
  5. C (curveto): Draws a cubic Bézier curve.
  6. S (smooth curveto): Draws a smooth cubic Bézier curve.
  7. Q (quadratic Bézier curve): Draws a quadratic Bézier curve.
  8. T (smooth quadratic Bézier curveto): Draws a smooth quadratic Bézier curve.
  9. A (elliptical Arc): Draws an elliptical arc.
  10. Z (closepath): Closes the path by drawing a straight line from the current point to the start point.

Path Examples

Simple Path

1
<svg width="100" height="100">
2
  <path
3
    d="M10 10 H 90 V 90 H 10 Z"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

This path starts at (10, 10), draws a horizontal line to (90, 10), then a vertical line to (90, 90), then a horizontal line to (10, 90), and finally closes the path.

Bézier Curve

1
<svg width="100" height="100">
2
  <path
3
    d="M10 80 C 40 10, 65 10, 95 80"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

This path starts at (10, 80), draws a cubic Bézier curve with control points at (40, 10) and (65, 10), and ends at (95, 80).

Elliptical Arc

1
<svg width="100" height="100">
2
  <path
3
    d="M10 50 A 30 30 0 0 1 90 50"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

This path starts at (10, 50) and draws an elliptical arc with a radius of 30, ending at (90, 50).

Detailed Explanation and Examples of Attributes

M (moveto) Command

1
<svg width="100" height="100">
2
  <path d="M10 10 L90 90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

L (lineto) Command

1
<svg width="100" height="100">
2
  <path
3
    d="M10 10 L90 10 L90 90 L10 90 Z"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

H (horizontal lineto) Command

1
<svg width="100" height="100">
2
  <path d="M10 10 H90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

V (vertical lineto) Command

1
<svg width="100" height="100">
2
  <path d="M10 10 V90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

C (curveto) Command

1
<svg width="100" height="100">
2
  <path
3
    d="M10 80 C 40 10, 65 10, 95 80"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

S (smooth curveto) Command

1
<svg width="100" height="100">
2
  <path d="M10 80 S 40 10, 95 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Q (quadratic Bézier curve) Command

1
<svg width="100" height="100">
2
  <path d="M10 80 Q 50 10, 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

T (smooth quadratic Bézier curveto) Command

1
<svg width="100" height="100">
2
  <path d="M10 80 T 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

A (elliptical Arc) Command

1
<svg width="100" height="100">
2
  <path
3
    d="M10 50 A 30 30 0 0 1 90 50"
4
    stroke="black"
5
    stroke-width="3"
6
    fill="none"
7
  />
8
</svg>

Z (closepath) Command

1
<svg width="100" height="100">
2
  <path d="M10 10 H90 V90 H10 Z" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Online Learning Websites and Resources

  1. MDN Web Docs: Provides detailed SVG tutorials and references.

  2. W3Schools: Offers simple and easy-to-understand SVG tutorials.

  3. CSS-Tricks: Provides advanced usage tips and cases for SVG.

  4. SVGOMG: An online tool for optimizing SVG files.

Similar Posts

How to Install and Renew Let’s Encrypt Certificates on Alibaba Cloud Server

How to Install and Renew Let’s Encrypt Certificates on Alibaba Cloud Server

How to Build a Blog：Comprehensive Guide and Platform Analysis

How to Build a Blog：Comprehensive Guide and Platform Analysis