Svg and androidsvg

Svg and androidsvg
Abstract:

Previously, I introduced canvas for image creation. Today I will share svg for image creation.

Introduction:

SVG indicates Scalable Vector Graphics ). SVG defines images in XML format. Svg has the following advantages:

• SVG can be read and modified by many tools (such as NotePad)
• SVG is smaller in size and more compact than JPEG and GIF images.
• SVG is scalable
• SVG images can be printed with high quality at any resolution
• SVG can be amplified without decreasing the image quality
• The text in SVG images is optional and searchable (suitable for creating maps)
• SVG can run with Java Technology
• SVG is an open standard
• SVG files are pure XML

The biggest advantage of SVG compared with Flash is its compatibility with other standards (such as XSL and DOM. Flash is not an open-source private technology.

View and edit:

Currently, mainstream browsers support svg, which allows you to directly view the results through browsers. To view the SVG source code, you can view it in any editor, such as notepad and sublime text. If you are in a browser, right-click the window and choose view source code ". Any editor can be edited. The file suffix is svg.

Browser:

 

Instance:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/></svg>

The standalone attribute specifies whether the SVG file is "independent" or contains references to external files. Standalone = "no" means that the SVG document references an external file-here, it is a DTD file. The second and third rows reference the external svg dtd. The DTD is located at http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd ". This DTD is located in W3C and contains all the allowed SVG elements. The SVG code starts with <svg> elements, including enable tags <svg> and disable tags </svg>. This is the root element. The width and height attributes can be used to set the width and height of the SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace. <Circle> of SVG is used to create a circle. The cx and cy attributes define the x and y coordinates of the circle center. If the two attributes are ignored, the dot is set to (0, 0 ). The r attribute defines the radius of the circle. The stroke and stroke-width attributes control how to display the shape outline. We set the contour of the circle to 2px width and black border. Set the color in the shape in the fill attribute. We set the fill color to red.

Reference svg in HTML:

SVG files can be embedded into HTML documents using the following tags: <embed>, <object>, or <iframe>.

Embed:

<embed src="circle.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

 

<Embed> labels are supported by all mainstream browsers and scripts are allowed. The <embed> label is recommended by Adobe SVG Viewer when SVG is embedded in HTML pages! However, you cannot use <embed> to create valid XHTML. No <embed> label exists in any HTML specification. The pluginspage attribute points to the URL of the downloaded plug-in.

Object:

<object data="circle.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

<Object> tags are the standard tags of HTML 4 and are supported by all newer browsers. Its disadvantage is that script is not allowed. If you have installed the latest version of Adobe SVG Viewer, the SVG file cannot work when the <object> label is used (at least cannot work in IE )! The codebase attribute points to the URL of the downloaded plug-in.

Iframe:

<iframe src="circle.svg" width="300" height="100"></iframe>

<Iframe> labels can work in most browsers.

Direct embedding:

<svg width="100%" height="100%" version="1.1"        xmlns="http://www.w3.org/2000/svg">        <circle cx="100" cy="50" r="40" stroke="black"        stroke-width="2" fill="red"/>        </svg>

You can directly embed svg tags into the html body.

Svg flat graphics:

Rectangle:

<Svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <rect width = "300" height = "100" style = "fill: red; stroke-width: 1; stroke: rgb (0, 0, 0) "/> <! -- The width and height attributes of the rect element can define the height and width of the rectangle. The style attribute is used to define the CSS attribute. The fill attribute defines the fill color of the rectangle, the stroke-width attribute defines the width of the rectangle border, and the stroke attribute defines the color of the rectangle border --> </svg>

Square:

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">        <polygon points="10,10 110,10 110,110 10,110" style="fill:red;stroke:#000000;stroke-width:1"/>                </svg>

 

Triangle:

<Svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <polygon points = "50,100 150,100" style = "fill: red; stroke: #000000; stroke-width: 1 "/> <! -- The points attribute defines the x and y coordinates of each corner of a polygon, separated by Spaces --> </svg>

 

Circle:

<Svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <circle cx = "100" cy = "50" r = "40" stroke = "black" stroke-width = "2" fill = "red"/> <! -- The cx and cy attributes define the x and y coordinates of dots. If cx and cy are omitted, the center of the circle is set to (0, 0). The r attribute defines the circle radius. --> </Svg>

 

Elliptic:

<Svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <ellipse cx = "100" cy = "80" rx = "80" ry = "50" style = "fill: red; stroke: #000; stroke-width: 2 "/> <! -- The cx attribute defines the x coordinate of the dot, the cy attribute defines the y coordinate of the dot, the rx attribute defines the horizontal radius, and the ry attribute defines the vertical radius --> </svg>

 

Line:

<Svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <line x1 = "0" y1 = "0" x2 = "300" y2 = "300" style = "stroke: red; stroke-width: 2 "/> <! -- The x1 attribute defines the start of the line on the x axis, the y1 attribute defines the start of the line on the y axis, and the x2 attribute defines the end of the line on the x axis, the y2 attribute defines the end of a line on the y axis --> </svg>

 

Line:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>                </svg>

Spiral:

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">        <path d="M153 334        C153 334 151 334 151 334        C151 339 153 344 156 344        C164 344 171 339 171 334        C171 322 164 314 156 314        C142 314 131 322 131 334        C131 350 142 364 156 364        C175 364 191 350 191 334        C191 311 175 294 156 294        C131 294 111 311 111 334        C111 361 131 384 156 384        C186 384 211 361 211 334        C211 300 186 274 156 274"        style="fill:white;stroke:red;stroke-width:2"/>        <!-- 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 -->        </svg>

 

 

Note: upper case indicates absolute positioning, and lower case indicates relative positioning.