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.svg" 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

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