SVGScalable Vector Graphics: a two-dimensional Graphic Representation Language.
With SVG, we can implement many painting operations of the same Canvas API type, but when drawing text on the Canvas element, the characters will be fixed in pixels. Text is a part of an image. text content cannot be changed unless the Canvas area is re-drawn. Because of this, the text on the Canvas cannot be obtained by the search engine, while the text on the SVG is searchable. For example, Google indexes the text in SVG content on the Web.
Add SVG to the page
Inline mode: used like other elements in HTML. On this basis, you can write HTML, JavaScript, and SVG interaction applications.
<body> <svg width="200" height="200"> </svg></body>
External mode: Imports external SVG files in HTML using elements. However, scripts that interact with SVG elements cannot be written.
Simple shape
SVG contains basic shape elements, such as rectangles, circles, and rectangles. The size and position of a shape element are defined as attributes. The attributes of a rectangle are width and height. The circle has an r attribute indicating the radius. They all use CSS syntax to indicate the distance, so the Unit includes px, point, em, and so on.
Rectangle:X = "50" y = "20" indicates the starting point of the rectangle)
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg></body>
The SVG draw switch object is based on the order in which the object document appears. If we draw a circle after the rectangle is drawn, the circle will be displayed 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 elements
In SVG, multiple elements can be combined to form a group and become a whole.
<G> An element represents a group and can be used to combine multiple related elements. Group members can be referenced by IDs. Groups can also be transformed as a whole. If you add a transform attribute to a group, all the content in the group will be changed. The transform attributes include rotation, deformation, scaling, and skew.
<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 the content to be used in the future. You can use the <use> element to link the content defined in <defs> to the desired place. With these two elements, You can reuse the same content multiple times to 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>
Pattern and Gradient
<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> <% -- gradient -- %> <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
SVG does not contain simple shapes, but also free-form paths. The path element has a d attribute, indicating path data. In the value of d, M indicates moving to, L indicates Line to, Q indicates the quadratic curve, and Z indicates the 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 a bit similar to the style definition 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
