Scalable Vector Graphics (SVG) is an XML-based markup language used to describe two-dimensional vector graphics. As a text-based open web standard, SVG can render graphics of different sizes elegantly and concisely, and seamlessly integrates with other web standards such as CSS, DOM, JavaScript and SMIL. In essence, SVG is relative to images, just like HTML is relative to text.
SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. In addition, this also means that any text editor and drawing software can be used to create and edit them.
Unlike traditional bitmap image modes, like JPEG and PNG, SVG format provides vector graphics, which means that its images can be infinitely enlarged without distortion or quality degradation, and the content can be easily modified.
SVG is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
Understand svg elements
SVG images are created using various elements, which are applied to the structure, drawing, and layout of vector images. Here, the reference document for each SVG element can be found on the reference document link .
For example, the line element is a basic SVG shape used to create a line connecting two points. Proprietary attributes x1, x2, y1, y2 represent the coordinate positions of two points.
<svg class="container">
<line x1="0" y1="10" x2="270" y2="10" class="line"/>
</svg>
SVG elements can be modified through attributes, which specify detailed information about how to process or render the element. Refer to the links to the documentation to help you understand which elements support them and how they work.
SVG provides a wide range of stroke attributes for describing outlines, including
1. Stroke specifies the color
2. Stroke-width specifies the width
3. Stroke-linecap specifies the endpoint style
4. Stroke-dasharray specifies the interval line array
5. Stroke-dashoffset specifies the position offset
When stroke-dasharray has two values, it represents the length of the dashed line and the distance between each dashed line. The attribute stroke-dashoffset is the offset relative to the starting point. When the value of x is offset by a positive number, it is equivalent to moving x to the left. Length units, when a negative number is offset by x, it is equivalent to moving x length units to the right.
Using these two properties, we can make good-looking animation effects, which can realize the line segment from scratch, from short to long.
When the mouse is moved in, the offset is changed from 270 to 0 to achieve the effect in the animation
.line {
stroke-dashoffset: 270;
stroke: #eee;
stroke-dasharray: 270;
stroke-width: 20;
transition: stroke-dashoffset 0.3;
}
.container:hover .line{
stroke-dashoffset: 0;
}
Just like HTML, SVG also has a Document Object Model (DOM) and events that can be accessed by JavaScript. This allows developers to create rich animations and interactive images. A little SVG can greatly enrich web content.