YouTip

An SVG document consists of one or more SVG elements that define the content and attributes of the graphics. <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> * The `width` and `height` attributes define the width and height of the SVG canvas. * The `xmlns` attribute specifies the XML namespace for the SVG document. **Basic Syntax of SVG:** * An SVG document starts with the `` tag and ends with the `` tag. * SVG elements use tags to describe different shapes, for example, `` represents a circle, `` represents a rectangle, etc. * SVG elements can contain attributes to specify various characteristics of the shape, such as position, size, color, etc. **Drawing Basic Shapes:** SVG provides a series of shape elements to draw various shapes, such as rectangles, circles, lines, polygons, etc. * ``: Draws a rectangle * ``: Draws a circle * ``: Draws an ellipse * ``: Draws a line * ``: Draws a polyline * ``: Draws a polygon * ``: Draws a path **Rectangles:** Use the element to draw a rectangle, specifying attributes like position, size, corner radius, etc. **Circles:** Use the element to draw a circle, specifying the center coordinates and radius. **Ellipses:** Use the element to draw an ellipse, specifying the center coordinates and the radii of the major and minor axes. **Lines:** Use the element to draw a line, requiring the specification of start and end point coordinates. **Polygons:** Use the element to draw a polygon, requiring the specification of coordinates for multiple vertices. **Polylines:** Use the element to draw a polyline, requiring the specification of coordinates for multiple points. **Paths:** Use the element to draw a path, which can draw various shapes by specifying a series of path commands. **Gradients and Fills:** * Use `` or `` to define gradients. * Use the `fill` and `stroke` attributes to specify fill and stroke styles. **Text and Fonts:** * Use the `` element to insert text. * Use attributes like `font-family`, `font-size`, etc., to control text styles. Animation and Interaction: * Use CSS or JavaScript to create animation effects. * Add event handlers to implement interactive features, such as mouse clicks, hover effects, etc. **SVG Element Attributes:** SVG elements can have various attributes used to specify characteristics of the shape like position, size, color, etc. <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="2" /> * The `cx` and `cy` attributes define the x and y coordinates of the circle's center. * The `r` attribute defines the radius of the circle. * The `fill` attribute defines the fill color. * The `stroke` attribute defines the stroke color. * The `stroke-width` attribute defines the stroke width. **Nesting and Grouping:** SVG elements can be nested and grouped to better organize and manage graphic elements. * The `` element is used to create a group. * The `id` attribute is used to assign a unique identifier to the group. * * * ## Simple SVG Examples It is recommended to use .svg (all lowercase) as the file extension for SVG files. 1. The following is a simple SVG file example that creates an SVG image containing a circle: ## test.svg File This code describes an SVG canvas with a width of 200 units and a height of 200 units. A circle is drawn on the canvas with center coordinates (100, 100), a radius of 80 units, and a fill color of blue. Preview: !(#) 2. Another simple SVG graphic example: ## test.svg File SVG TEST [Try it »](#) The display result is as follows: **SVG Code Parsing:** * ``: This is the opening tag of the SVG document, specifying the SVG version, base configuration (full), and the canvas width and height. The xmlns attribute defines the XML namespace for the SVG document. * ``: This is a rectangle element, represented by the `` tag. Its width and height are both set to the canvas width and height (100%). The stroke attribute specifies the rectangle's border color as red, the stroke-width attribute sets the border width to 4 units, and the fill attribute specifies the rectangle's fill color as yellow. * ``: This is a circle element, represented by the `` tag. Its center coordinates (cx, cy) are (150, 100) respectively, the radius r is 80 units, and the fill attribute specifies the circle's fill color as green. * ` SVG TEST`: This is a text element, represented by the `` tag. Its starting coordinates (x, y) are (150, 115), the font-size attribute sets the font size to 16 units, the text-anchor attribute sets the text's horizontal alignment to center, and the fill attribute specifies the text color as white. The text content is " SVG TEST". * ``: This is the closing tag of the SVG document, marking the end of the SVG document.