Sideway
output.to from Sideway
Draft for Information Only

Content

Scalable Vector Graphics (SVG)
 SVG Document
  Example of a Simple Embedded SVG Document
  Example of a Simple Self-Contained SVG Document
 SVG Element Tags
 SVG Presentation Attributes
 Sources and References

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a XML-based markup language for describing two-dimensional graphics. Besides vector graphic shapes SVG also images and text. An SVG image is defined in a XML text file, therefore it can be created and edited with a text editor. And a scalable SVG image can be rendered at any size without loss of quality.

SVG Document

An SVG document is a structured document according to the SVG standard or specification …
  • SVG document is used to describe a two-dimensional image.
  • SVG document is also commonly called SVG image.
  • SVG document contains SVG tags and plain text in a structured form.
  • Basic structure of a SVG document: <svg>…</svg>.
  • SVG document can be saved as a self-contained document or file with extension ".svg" or can be embedded inline as a fragment within a praent HTML or XML document.

Example of a Simple Embedded SVG Document

Example of a Simple Embedded SVG Document:
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Embedded SVG Examples:</h1>
           <svg width='30' height='30'>
               <circle cx='15' cy='15' r='10' stroke='black' fill='transparent' stroke-width='2' />
           </svg>
    </body>
</html>
HTML Web Page Embedded Output:

Example of a Simple Self-Contained SVG Document

Example of a Simple Self-Contained SVG Document:
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg width='30' height='30' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <circle cx='15' cy='15' r='10' stroke='black' fill='transparent' stroke-width='2' />
</svg>
    
HTML Web Page Embedded Output:

SVG Element Tags

SVG element tags are elements used to construct a SVG image. For example,
  • <circle> ,<line> define basic shapes
  • <svg> defines a container
  • <font> defines a font style
  • <text> defines a text content
  • <image> defines a renderable element

SVG Presentation Attributes

SVG presentation attributes are properties used as attributes for both SVG specific and CSS rendering. For example,
  • d: defines a SVG path to be drawn.
  • stroke-dasharray, stroke-linecap, stroke-linejoin : defines properties of SVG path to be drawn
  • transform: defines transforms to be applied.
  • color, fillcolor, fill:  defines CSS properties for rendering
  • display, font-family: defines general CSS properties for rendering

Sources and References

  • https://www.w3.org/TR/SVG2/
  • https://www.w3.org/TR/SVG12/
  • https://www.w3.org/TR/SVG11/
  • https://www.w3.org/TR/2001/REC-SVG-20010904/
  • https://developer.mozilla.org/en-US/docs/Web/SVG

©sideway

ID: 210800028 Last Updated: 8/28/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 68

Computer

Hardware 154

Software

Application 207

Digitization 25

Latex 35

Manim 203

Numeric 19

Programming

Web 285

Unicode 504

HTML 65

CSS 63

SVG 9

ASP.NET 229

OS 422

DeskTop 7

Python 64

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 32

Coordinate Geometry 1

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2021 Sideway . All rights reserved Disclaimers last modified on 06 September 2019