Common applications of SVG in front-end

Just some commonly used applications, but enough to get started.

1. svg tag

1. svg

• The svg tag is equivalent to the canvas.
• Width and height can be defined in the label

<svg width="100" height="100"></svg>

2. g

• gTags can group svg elements, and attributes can be configured uniformly after grouping.

<svg>
	<g>...</g>
</svg>

2. Stroke attributes

• stroke: Stroke color attribute, the value is the color value
• strike-width: Stroke width attribute, the value is a numerical value
• stroke-linecap: Pen cap attribute of stroke
  • butt: Default value, no wire cap.
  • round: round wire cap.
  • square: Square line cap.
• stroke-dasharray: Stroke dotted line attribute, the value is an array sequence, at least 2 values.

<path d="M175 200 l 150 0" stroke="gray" stroke-dasharray="20,10,3,3" stroke-width="3" fill="none"></path>

• All stroke properties can be applied to lines, text, and element outlines.
• It will be used extensively below.

3. Blur and shadow effects

• To add special effects to svg, you need to add <filter></filter> implementation and define it in <defs></defs> (definitions).
• filter contains one or more effects (filters).
• filter attribute:
  • id: identification filter.
  • x: x coordinate of filter starting point
  • y: y coordinate of the starting point of the filter
  • width: filter width
  • height: filter height

1. Blurred

• feGaussianBlueDefine Gaussian blur.
• Defined in filter.
• feGaussianBlueAttributes:
  • stdDeviation: Define the fuzzy quantity, the value is a numerical value, the larger the value, the more fuzzy it is.

<svg width="100" height="100">
    <defs>
        <filter x="0" y="0" id="f1">
            <feGaussianBlur stdDeviation="15"></feGaussianBlur>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="pink" stroke-width="3" fill="skyblue" filter="url(#f1)"></rect>
</svg>

2. Shadow effect

• The shadow effect is achieved with feOffset and feBlend.
• Defined in filter.
• feOffsetDefine offset, properties:
  • dx: The offset of the shadow on the x-axis, the value is a numerical value.
  • dy: The offset of the shadow on the y-axis, the value is a numerical value.
  • in: Indicates the source of the shadow image. (SourceAlpha black shadow, SourceGraphic image shadow)
• feBlendBlend the original image on the offset image, properties:
  • in: The value is SourceGraphic.

<svg width="140" height="140">
    <defs>
        <filter x="0" y="0" width="200" height="200" id="f2">
            <feOffset in="SourceAlpha" dx="0" dy="0"/>
            <feGaussianBlur stdDeviation="5" />
            <feBlend in="SourceGraphic"/>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"></rect>
</svg>

4. Linear gradient and radial gradient

1. Linear gradient

• Linear gradient is implemented with <linearGradient></linearGradient> and defined in <defs></defs>.
• linearGradientAttributes:
  • id
  • x1: x coordinate of linear gradient start position
  • y1: y coordinate of the starting position of the linear gradient
  • x2: x coordinate of linear gradient end position
  • y2: y coordinate of linear gradient end position
• Linear gradients can be composed of multiple colors, each color is specified with a <stop />.
• stop Attributes:
  • offset: start and end position, value is percentage
  • stop-color: Color.

<svg width="400" height="150">
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="rgb(255,255,0)" ></stop>
            <stop offset="100%" stop-color="rgb(255,0,0)" ></stop>
        </linearGradient>
    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad)"></ellipse>
    <text fill="white" font-size="45" x="160" y="85">SVG</text>
</svg>

2. Radial gradient

• Radial gradient is achieved with <radialGradient></radialGradient>.
• Attributes:
  • id
  • cx, cy, r: define the outermost circle (the abscissa, ordinate, and radius of the center of the gradient end circle)
  • fx, fy: define the innermost circle (abscissa and ordinate of the gradient starting point)

<svg width="400" height="150">
    <defs>
        <radialGradient id="grad" cx="30%" cy="30%" r="50%" fx="30%" fy="30%">
            <stop offset="0%" stop-color="white" ></stop>
            <stop offset="100%" stop-color="blue" ></stop>
        </radialGradient>
    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad)"></ellipse>
</svg>

5. Drawing

1. Built-in shape elements

• Elements: rectangle, circle, ellipse, line, polyline, polygon, path.
• Coordinate System
  

2. Draw a rectangle

• Use label rect.<rect />
• Attributes:
  • width width
  • height height
  • fill color fill
  • stroke color stroke
  • Stroke width stroke-width.

<svg width="400" height="400">
    <rect width="200" height="100" fill="skyblue" stroke-width="3" stroke="pink"/>
</svg>

• (Continued) Properties:
  • x: left position
  • y: top position
  • fill-opacity: fill opacity, 0-1
  • stroke-opacity: stroke opacity.
  • opacity: The opacity of the entire rectangle.

<svg width="400" height="400">
    <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke-width="3"
          stroke="pink" fill-opacity="0.1" stroke-opacity="0.5"/>
</svg>

• (Continued) Properties:
  • rx: The radius length of the fillet in the x-axis direction.
  • ry: The radius length of the fillet in the y-axis direction.

<svg width="400" height="400">
    <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke-width="3"
          stroke="pink" fill-opacity="0.1" stroke-opacity="0.5" rx="20" ry="20"/>
</svg>

3. Draw a circle

• Use tags<circle/>
• Attributes:
  • cx: x-axis coordinate of circle center, default 0
  • cy: y-axis coordinate of the center of the circle, default 0
  • r: circle radius.
  • stroke、stroke-width、fill。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="skyblue" stroke-width="3" fill="pink"/>
</svg>

4. Draw an ellipse

• Use tags<ellipse />
• Attributes:
  • cx、cy。
  • rx: horizontal radius
  • ry: vertical radius.

<svg width="500" height="140">
    <ellipse rx="100" ry="50" cx="200" cy="80" stroke-width="3" stroke="pink" fill="skyblue" />
</svg>

• stacked ellipses

<svg width="500" height="140">
    <ellipse rx="220" ry="30" cx="240" cy="100" fill="pink" />
    <ellipse rx="190" ry="20" cx="220" cy="70" fill="skyblue" />
    <ellipse rx="170" ry="15" cx="210" cy="45" fill="#fff2df" />
</svg>

• hollow ellipse

<svg width="500" height="100">
    <ellipse cx="240" cy="50" rx="220" ry="30" fill="pink"></ellipse>
    <ellipse cx="220" cy="50" rx="190" ry="20" fill="white"></ellipse>
</svg>

5. Draw lines

• Use tags<line />
• Attributes:
  • x1: starting point x coordinate
  • y1: y coordinate of starting point
  • x2: end point x coordinate
  • y2: end point y coordinate

<svg>
    <line x1="0" y1="0" x2="200" y2="200" stroke="pink" stroke-width="2"></line>
</svg>

6. Draw polygons

• use<polygon />
• Used to create a shape with at least three sides.
• Attributes:
  • points: Define the (x, y) coordinates of each corner, at least three coordinates.

<svg width="500" height="300">
    <polygon points="200,20 250,190 160,210" fill="pink" stroke="skyblue" stroke-width="3"></polygon>
</svg>

• Draw a five-pointed star

<svg width="500" height="300">
    <polygon points="100,10 40,198 198,78 10,78 160,198" fill="pink" stroke="skyblue" stroke-width="3"></polygon>
</svg>

7. Draw multiple lines

• use<polyline />
• Create any shape consisting only of straight lines
• Attributes:
  • points: Same as above

<svg width="500" height="300">
    <polyline points="100,10 40,198 198,78 10,78 160,198" fill="none" stroke="skyblue" stroke-width="3"></polyline>
</svg>

8. Draw text

• use<text>...</text>
• Attributes
  • x: text x coordinate
  • y: text y coordinate
  • font-size: text size
  • text-anchor: alignment (start | middle | end)
  • stroke、stroke-width、fill

<svg width="500" height="300">
    <text x="0" y="200" font-size="30" text-anchor="start" fill="none" stroke="red" stroke-width="1">家人们，谁懂啊</text>
</svg>

• (Continued) Properties:
  • transform
    • rotate(rotation angle rotation center x, rotation center y). The default (x, y) is (0, 0).

<svg width="500" height="300">
    <text x="10" y="50" font-size="30" text-anchor="start" fill="none" stroke="red" stroke-width="1" transform="rotate(30 20,40)">家人们，谁懂啊</text>
</svg>

• textThe element can wrap multiple tspan, and each tspan can contain different formats and positions.
• tspanAttributes:
  • x、y

<svg width="500" height="300">
    <text x="10" y="20" fill="red">
        Several lines
        <tspan x="10" y="45">First Line</tspan>
        <tspan x="10" y="70">Second Line</tspan>
    </text>
</svg>

• textThe tag can add links. Wrap with a. To add text, you need to add the attribute to svg, and the attribute value is fixed to the address of w3. xmlns:link
• aAttributes:
  • xlink:href:link address
  • target: Jump mode

<svg width="200" height="30" xmlns:link="http://www.w3.org/1999/xhtml">
    <a xlink:href="https://www.baidu.com" target="_blank">
        <text x="10" y="15" fill="red">百度</text>
    </a>
</svg>

9. Draw a path

• use<path />
• Can draw graphics of any shape
• Attributes:
  • d: draw, defines the command for drawing paths. Commands in uppercase letters represent absolute positioning, while lowercase letters represent relative positioning.
    • command M/m：movetocopy, set to starting point (x, y)
    • Command L/l: lineto copy, system one line.
    • Command q: Abbreviation of quadraticBezierCurve, draws quadratic Bezier curve. Define control point and end point coordinates.
• Draws a quadratic Bezier.

<svg width="450" height="400">
    <path d="M100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"></path>
    <path d="M250 50 l 150 300" stroke="red" stroke-width="3" fill="none"></path>
    <path d="M175 200 l 150 0" stroke="green" stroke-width="3" fill="none"></path>
    <path d="M100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none"></path>

    <g fill="blue">
        <circle r="3" cx="100" cy="350"></circle>
        <circle r="3" cx="250" cy="50"></circle>
        <circle r="3" cx="400" cy="350"></circle>
    </g>
    <g font-size="30" fill="black" text-anchor="middle">
        <text x="100" y="350" dx="-35">A</text>
        <text x="250" y="50" dx="-10">B</text>
        <text x="400" y="350" dx="35">C</text>
    </g>
</svg>