This is the 26th day of my participation in the August Text Challenge.More challenges in August

1. Introduction

SVG stands for Scalable Vector Graphics.

SVG is a language that uses XML to describe two-dimensional graphics and drawing programs.

SVG images do not lose graphical quality when they are enlarged or resized.

SVG is the World Wide Web Consortium standard.

SVG Reference Documentation

Features:

(1) SVG images can be created and modified using a text editor;

(2) SVG images can be searched, indexed, scripted, or compressed;

(3) SVG is scalable;

(4) SVG images can be printed with high quality at any resolution;

(5) SVG can be enlarged without degrading image quality;

1.1 Usage Mode

  1. SVG files can be inserted directly into a web page, become part of the DOM, and then manipulated with JavaScript and CSS
<! DOCTYPE html> <html> <head></head> <body> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" > <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> </body> </html>Copy the code
  1. The SVG code is written in a separate file and inserted into the web page with tags such as < img > < object > < Embed > < iframe >
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
Copy the code
  1. CSS can use SVG files
.logo {
  background: url(icon.svg);
}
Copy the code
  1. SVG files can be converted to BASE64 encoding and written to web pages as Data URIs
<img src="data:image/svg+xml; base64,[data]">
Copy the code

1.2 Coordinate system

SVG uses a coordinate system, or grid system: the top left corner of the page is a (0,0) coordinate point, in pixels, with positive X-axis pointing to the right and positive Y-axis pointing down.

Note: This is the opposite of how you were taught to draw as a child. But in HTML documents, elements are positioned this way.

1.3 color

RGB: red, green, blue, the value range of each component [0, 255], the advantage is that the display is easier to parse.

HSL: color H, saturation S %, brightness L %, the value range of each component is [0, 359], [0, 100%], [0, 100%] respectively, where h=0 means red, H =0 means 120 green, and H =0 means 240 blue.

2. Attributes that apply to SVG tags

2.1 the viewport:

Width height: controls the width and height of SVG;

2.2 viewBox:

Define the position and size of the user’s field of view, that is, define a rectangular area for viewing an SVG view. More graphically, SVG is like our display screen, and the viewBox is the box selected by the screenshot tool. The final rendering is to display the screenshot from the box in full screen on the display.

Eg: viewBox =’20 20 100 100′, the first two parameters represent the x and y coordinates of the viewBox relative to the SVG view, and the last two parameters represent the size of the viewBox;

The relationship to the actual size of SVG is as follows:

As shown in the image below, the part that the user can see is the blue star, while the other side of the star is not visible

ViewBox use cases:

Step 1: Draw the rectangle

<svg width="200" height="200" style="border: 2px solid #58a">
  <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
</svg>
Copy the code

ViewBox =’0 0 100 100′, which means that the user can only see the area defined by the viewBox in the SVG view, i.e. the area in the red box below: ViewBox =”x, y, width, height” // x: top left abscess, y: top left abscess, width: width, height: height

<svg width="200" height="200" style="border: 2px solid #58a" viewBox='0 0, 100, 100'>
  <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
</svg>
Copy the code

Final effect:

2.3 preserveAspectRatio

This property also applies to < SVG > elements, and it applies to viewboxes; Property value is a combination of two values separated by a space.

eg:

preserveAspectRatio="xMidYMid meet"
Copy the code

The first value indicates: how viewBox viewPort aligns;

The first value is divided into two parts: the first part represents the alignment in the x direction and the second part represents the alignment in the y direction.

XMaxYMax indicates right-down

XMidYMid indicates medium to medium

The second value indicates how to maintain the aspect ratio (which can be null);

Figure 1: The red area is the visible area without preserveaspectRatio;

Figure 2: The aspect ratio is kept scaled by aligning with the left of X-axis and the upper edge of Y-axis;

Figure 3: While maintaining aspect ratio, the SVG region is filled with equiscale zooming in the direction of small proportion, i.e. x axis;

Figure 4: preserveaspectRatio=” None “, deformation sufficiently adapted to SVG;

3. Attributes that apply to elements inside SVG

  1. SVG supports CSS selectors to style elements
/* Define the style */
.rectStyle {
  fill: yellow;
}
<svg width="200" height="200">
  <rect class="rectStyle" width="20" height="20"></rect>
</svg>
Copy the code
  1. Styles are set directly in the element
<svg width="200" height="200">
  <rect width="20" height="20" fill="yellow"></rect>
</svg>
Copy the code
  1. Written style
<svg width="200" height="200">
  <rect style="fill: yellow;" width="20" height="20"></rect>
</svg>
Copy the code

3.1 the filling

Fill: define the fill color and text color; Fill-opacity: defines the opacity of the fill color; Fill-rule: specifies the filling rule. Only the filling rule meets the filling rule can be filled. Valid values: nonzero | evenodd | inherit default: nonzero used to shape the shape elements and text elements Inheritable: is the scale: no media: visible animations available: isCopy the code

nonzero

It literally means non-zero. According to the rule, to determine whether a point is in the graph, make a ray from the point in any direction, and then detect the intersection of the ray and the graph path. Counting from 0, plus 1 if the path crosses the ray from left to right, minus 1 if it crosses the ray from right to left. After obtaining the counting result, if the result is 0, the point is considered to be outside the graph, otherwise it is considered to be inside.

The following illustration illustrates the Nonzero rule:

Evenodd literally means “even”. According to this rule, to determine whether a point is in the graph, take a ray from that point in any direction, and then detect the number of points where the ray intersects with the graph path. If it’s odd, it’s inside, and if it’s even, it’s outside.

The following illustration illustrates the evenodd rule:

3.2 a border

Stroke: border color; Stroke-width: width of the border; Stoke-opacity: border opacity, value [0.1]; Stroke - linecap: a single line endpoint style, generally used in a straight line or path, values: [butt | square | round], dock, square and circleCopy the code
Stroke-dasharray: dashed border. You can set the length and interval of each dashed line, separated by commas or Spaces, for example, stroke-dasharray="10, 5, 5, 10."
Copy the code

Stroke-dashoffset: Sets the dotted stroke offset to move the pattern forwardCopy the code
 <svg width="200" height="200" viewBox='0 0, 300, 300'>
    <line x1="20" y1="20" x2="120" y2="20"
        stroke="red" stroke-width="5" stroke-linecap="butt"
        stroke-dasharray="20 5 5 to 10">
    </line>
    <line x1="20" y1="60" x2="120" y2="60"
        stroke="red" stroke-width="5" stroke-linecap="butt"
        stroke-dasharray="20 5 5 to 10" stroke-dashoffset="10">
    </line>
 </svg>
Copy the code

The dashed line has a style of 20, 5, 5, 10 and an offset of 10. The second dashed line, as shown in the figure below, has moved 10 units forward

Sroke - linejoin: the style of the connecting points between two line segments, values: [miter | round | bevel]Copy the code

Sharp (first left), rounded (second left) and bevel (third left)

Sroke-miterlimit: default value4, when miterLength/stroke-width < stroke-miterLimit, stroke-lineJoin value will be changed to bevel bevel AngleCopy the code

In the following figure, stroke-width is 15. According to the formula, miterLength/stroke-width is approximately 5.2, that is, when stroke-miterLimit is less than 6, stroke-lineJoin value becomes bevel bevel Angle.

3.3 the transparency

Opacity: Defines the opacity of the entire graphCopy the code

3.4 the font

Font-size: 16px; Word-wrap: break-word! Important; Font-weight: the weight of a font; Background-position: initial; background-repeat: initial; Text-decoration: underline style; The arrangement of text - anchor: set the text attribute, the attribute value [start | middle | | end inherit]; For example, "middle" indicates that the text location origin is moved to the text center.Copy the code

3.5 transform

Transform: same as CSS, default is the upper left corner of the rotation center, such as: transform="rotate(30)"; Transform-origin: same as CSS, set the operation center of rotation; Rotate: Sets the rotation Angle of text elements. The value is clockwise.Copy the code

Rotate differs from the rotate in transform, for example, rotate=”30″. The rotate in transform rotates the entire element.

<svg width="200" height="200">
   <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">Sample text 1</text>
</svg>
<svg width="200" height="200">
   <text x="10" y="10" dx="10" dy="10" textLength="100" transform="rotate(20)">Example text 2</text>
</svg>
Copy the code