SVG Tutorial 01

What is SVG?

• SVG refers to a scalable vector graphic (Scalable vector graphics)
• SVG is used to define vector-based graphics for the network
• SVG defines graphics using XML format
• SVG images have no loss of graphics quality when zoomed in or changed size
• SVG is the standard of the World Wide Web Consortium
• SVG is a whole with a broad standard such as DOM and XSL

The history and advantages of SVG

In January 2003, SVG 1.1 was established as a standard.

The organizations that are involved in defining SVG are solar micro systems, Adobe, Apple, IBM, and Kodak.

Compared to other image formats, the advantage of using SVG is that:

• SVG can be read and modified by a lot of tools (such as Notepad)
• SVG is smaller in size and more compressible than JPEG and GIF images.
• SVG is scalable
• SVG images can be printed with high quality at any resolution
• SVG can be amplified when the image quality is not degraded
• The text in the SVG image is optional and searchable (well suited for map creation)
• SVG can be run with Java technology
• SVG is an open standard
• The SVG file is purely XML

The main competitor of SVG is Flash.

The biggest advantage of SVG compared to Flash is that it is compatible with other standards such as XSL and DOM. Flash, however, is a proprietary technology that is not open source.

SVG instance

The following example is an example of a simple SVG file. SVG files must be saved with an. svg suffix:

<?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"><svgwidth= "100%"Height= "100%"version= "1.1"xmlns= "Http://www.w3.org/2000/svg"><CircleCX= "+"Cy= " the"R= "Max"Stroke= "BLACK"Stroke-width= "2"Fill= "Red"/></svg>

Code Explanation:

The first line contains the XML declaration. Please note the Standalone Property! This attribute specifies whether this SVG file is "stand-alone" or contains a reference to an external file.

Standalone= "No" means that an SVG document will refer to an external file-here, a DTD file.

The second and third lines refer to this external SVG DTD. The DTD is located in "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD is located in the consortium and contains all the allowed SVG elements.

The SVG code starts with the <svg> element, including opening tags <svg> and closing tags </svg>. This is the root element. The width and Height properties set the breadth and height of this SVG document. The Version property defines the SVG versions that are used, and the xmlns attribute defines the SVG namespace.

SVG <circle> is used to create a circle. The CX and CY Properties define the x and Y coordinates of the center of the circle. If these two properties are omitted, then the dot is set to (0, 0). The R property defines the radius of the circle.

The stroke and Stroke-width properties control how the outline of a shape is displayed. We set the outline of the circle to a 2px wide, black border.

The Fill property sets the color within the shape. We set the fill color to red.

The effect of closing the tag is to close the SVG element and the document itself.

Note: All open tabs must have a close tag!

SVG in an HTML page

SVG files can be embedded in HTML documents with the following tags:<embed>, <object> or <iframe>

SVG in an HTML page

Below, you will see three different ways to embed SVG files in HTML pages.

Use <embed> tags

<embed> tags are supported by all major browsers and allow the use of scripts.

Note: Using <embed> tags when embedding svg in HTML pages is the recommended method for Adobe SVG Viewer! However, if you need to create a legitimate XHTML, you cannot use <embed>. There are no <embed> tags in any HTML specification.

Grammar:

<embed src= "Rect.svg" width= "" "height=" "type=" Image/svg+xml "pluginspage=" Http://www.adobe.com/svg/viewer /install/"/>

　　

Note: The Pluginspage property points to the URL of the download plugin.

Use <object> tags

The <object> tag is the standard label for HTML 4 and is supported by all newer browsers. Its disadvantage is that scripting is not allowed.

Note: If you have the latest version of the Adobe SVG Viewer installed, the SVG file will not work when you use the <object> tag (at least not in IE)!

Grammar:

<object data= "Rect.svg" width= "" "height=" "type=" Image/svg+xml "codebase=" http://www.adobe.com/svg/viewer/ Install/"/>

　　

Note: The CODEBASE property points to the URL of the download plugin.

Use <iframe> tags

<iframe> tags can work in most browsers.

Grammar:

<iframe src= "Rect.svg" width= "height=" ></iframe>

　　

I'm looking forward to ....

It would be great to add the SVG elements to the HTML code simply by referencing the SVG namespace, which would look like this:

　　
SVG Tutorial 01