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


©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

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 224

Software

Application 213

Digitization 32

Latex 52

Manim 204

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 33

Coordinate Geometry 2

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-2022 Sideway . All rights reserved Disclaimers last modified on 06 September 2019