HTML5 inline SVG

HTML5 Inline SVG

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define vector-based graphics for the web

SVG uses XML Format definition graphics

SVG The graphic quality of the image will not be lost when it is enlarged or changed in size

SVG is a standard of the World Wide Web Consortium

With the help of SVG, we can achieve Many drawing operations are the same as the Canvas API type, but when drawing text on a Canvas element, the characters will be fixed to it in pixels. The text becomes part of the image, and the text content cannot be changed unless the Canvas drawing area is redrawn. Because of this, text on Canvas cannot be retrieved by search engines, but text on SVG is searchable. For example, Google indexes text from SVG content on the web.

SVG Advantages

Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:

SVG images can be created and modified with a text editor

SVG images can be searched, indexed, scripted, or compressed

SVGs are scalable

SVG images can Print with high quality at any resolution

SVG can be enlarged without losing image quality

Add SVG to the page

Inline mode: Used like other elements in HTML. On this basis, interactive applications of HTML, JavaScript and SVG can be written.

<body>
    <svg width="200" height="200">
    </svg>
</body>

External link method: Import external SVG files in HTML through the <img> element. The disadvantage is that you cannot write scripts that interact with SVG elements.

Simple shapes

SVG contains basic shape elements , such as rectangle, circle and ellipse. The size and position of shape elements are defined as properties. The properties of a rectangle are width and height. Circles have an r attribute that represents the radius. They all use CSS syntax to express distance, so the units include px, point, em, etc.

Rectangle: x="50" y="20" means the starting point of the rectangle is (50,20)

<body>
    <svg width="200" height="200">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
    </svg>
</body>

SVG draws switch objects in the order they appear in the object document. If we draw the circle after drawing the rectangle, the circle will appear on top of the rectangle.

Add a circle:

<body>    
<svg width="200" height="200">        
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc">
</rect>        
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> 
</svg>
</body>

Transform SVG element

Multiple elements can be combined in SVG to form a group and become a whole.

<g>The element represents a "group" and can be used to combine multiple related elements. Group members can be referenced by ID. In addition, the group can also be transformed as a whole. If you add a transform attribute to a group, all content in the group will be transformed. Transform properties include rotation, deformation, scaling, and beveling.

 <svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

Reuse content

The <defs> element in SVG is used to define content for future use. You can use the <use> element to link the content defined by <defs> to the place where it needs to be displayed. With these two elements, you can reuse the same content multiple times and eliminate redundancy.

<svg width="200" height="200">
        <defs>
            <g  id="ShapeGroup">
                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
            </g>
        </defs>
        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>
    </svg>

Patterns and gradients

<svg>
<defs>
            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
            </pattern>
            <%--渐变--%>
            <linearGradient id="RedBlackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
      <rect x="0" y="20" width="100" height="80" stroke="red"
           fill="url(#RedBlackGradient)" />
        <circle cx="120" cy="80" r="40" stroke="#00f"
            stroke-width="8" fill="url(#GravelPattern)" />
    </svg>

Path

##<path> tag is used to define path.

<path> tag

<path> tag is used to define the path.

The following commands can be used for path data:

M = moveto

L = lineto

#H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc

Z = closepath

Note: All of the above commands allow lowercase letters. Uppercase means absolute positioning, lowercase means relative positioning.

SVG contains simple shapes as well as free-form paths. The path element has a d attribute, which represents path data. In the value of d, M represents Move to, L represents Line to, Q represents a quadratic curve, and Z represents a closed path.

 <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

Text

The text in SVG is somewhat similar to the definition of style in CSS

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

Both SVG and Canvas The difference between

SVG is a language that uses XML to describe 2D graphics.

Canvas draws 2D graphics through JavaScript.

SVG is based on XML, which means every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawn graphic is considered an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.

Canvas is rendered pixel by pixel. In canvas, once a graphic is drawn, it no longer gets the browser's attention. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.

Continuing Learning

new file

submit Reset Code

Automatic operation

HTML5 inline SVG

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]