Sideway
output.to from Sideway
Draft for Information Only

Content

<image>
Usage context
Attributes
  Global attributes
  Specific attributes
DOM Interface
Example
Specifications
 Sources and References

<image>

The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files.

The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.

SVG files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try <use> with an external URL. To include SVG files and run scripts inside them, try <object> inside of <foreignObject>.

Note: The HTML spec defines <image> as a synonym for <img> while parsing HTML. This specific element and its behavior only apply inside SVG documents or inline SVG.

Usage context

Categories Graphics element, Graphics referencing element Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements

Attributes

Global attributes

Specific attributes

  • x: Positions the image horizontally from the origin.
  • y: Positions the image vertically from the origin.
  • width: The width the image renders at. Unlike HTML's <img>, this attribute is required.
  • height: The height the image renders at. Unlike HTML's <img>, this attribute is required.
  • href and xlink:href: Points at a URL for the image file.
  • preserveAspectRatio: Controls how the image is scaled.
  • crossorigin: Defines the value of the credentials flag for CORS requests.

DOM Interface

<image> implements the SVGImageElement interface.

Example

Basic rendering of a PNG image in SVG:
SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='280' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='226' height='226' viewBox='-25, -25, 226, 226' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg width='200' height='200'  xmlns='http://www.w3.org/2000/svg'>
       <image href='http://sideway.to/img/1/close.gif' height='200' width='200'/>
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='195' y='17' font-size='20'>(200,0)</text>
<text x='5' y='245' font-size='20'>(0,200)</text>
<text x='195' y='245' font-size='20'>(200,200)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='225' cy='25' r='2' fill='black'/>
<circle cx='25' cy='225' r='2' fill='black'/>
<circle cx='225' cy='225' r='2' fill='black'/>
</svg>
    
HTML Web Page Embedded Output:

Specifications

Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)

Sources and References

  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
  • https://www.w3.org/TR/SVG2/embedded.html

©sideway

ID: 211200014 Last Updated: 12/14/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 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

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 34

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