Sideway
output.to from Sideway
Draft for Information Only

Content

Scalable Vector Graphics (SVG)
 Embedding SVG to Page
  Using an <img> Tag
   Using a SVG file as Source
    Syntax
    Example
   Using SVG image data as Source
    Syntax
    Example
    Example
 Sources and References

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a XML-based markup language for describing two-dimensional graphics.

Embedding SVG to Page

Ways to embed SVG in HTML.

Using an <img> Tag

SVG image can be embedded in a HTML page through an <img> tag.

Using a SVG file as Source

The SVG image file can be used as the source of an <img> tag.
Syntax
<img src="image.svg" alt="image" />
Example
<img class="xw200" src="./../sideway/images/computer/software/digitization/2D/inkscape/001/hatch_45degree_001a.png" alt="image" />
image

Using SVG image data as Source

The SVG image data can be used as the source of an <img> tag directly through data URIs.
Syntax
<img src="data:image/svg+xml;utf8,%3Csvg%20⋯%3E⋯%3C/svg%3E" alt="image" />
<img src="data:image/svg+xml;base64, ⋯ " alt="image" />
Example
<img src="data:image/svg+xml;utf8,%3Csvg%20width='300'%20height='300'%20version='1.1'%20xmlns='http%3A//www.w3.org/2000/svg'%3E%3Ccircle%20cx='150'%20cy='150'%20r='100'%20stroke='black'%20fill='transparent'%20stroke-width='2'/%3E%3C/svg%3E" alt="image" />
image
Example
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMzAwJyBoZWlnaHQ9JzMwMCcgdmVyc2lvbj0nMS4xJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzE1MCcgY3k9JzE1MCcgcj0nMTAwJyBzdHJva2U9J2JsYWNrJyBmaWxsPSd0cmFuc3BhcmVudCcgc3Ryb2tlLXdpZHRoPScyJy8+PC9zdmc+" alt="image" />
image

Sources and References

  • https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

©sideway

ID: 210800029 Last Updated: 8/29/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 240

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