Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 815773 of SVG image element

  • Revision slug: Web/SVG/Tutorial/SVG_Image_Tag
  • Revision title: SVG image element
  • Revision id: 815773
  • Created:
  • Creator: Delapouite
  • Is current revision? Yes
  • Comment added links to <image> and xlink:href
Tags: 

Revision Content

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

The SVG {{ SVGElement("image") }} element allows for raster images to be rendered within an SVG object.

In this basic example, a .jpg image referenced by a {{ SVGAttr("xlink:href") }} attribute will be rendered inside an SVG object:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="https://www.w3.org/2000/svg" xmlns:xlink= "https://www.w3.org/1999/xlink">
	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>

There are some important things to take note of (referenced from the W3 specs):

  • If you do not set the x or y attributes, they will be set to 0.

  • If you do not set the height or width attributes, they will be set to 0.

  • Having a height or width attribute of 0 will disable rendering of the image.

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

Revision Source

 
<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>

<p>The SVG {{ SVGElement("image") }} element allows for raster images to be rendered within an SVG object.</p>

<p>In this basic example, a .jpg image referenced by a {{ SVGAttr("xlink:href") }} attribute will be rendered inside an SVG object:</p>

<pre class="brush: xml">
&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
&lt;svg width="5cm" height="4cm" version="1.1"
     xmlns="https://www.w3.org/2000/svg" xmlns:xlink= "https://www.w3.org/1999/xlink"&gt;
	&lt;image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
&lt;/svg&gt;</pre>

<p>There are some important things to take note of (referenced from the <a class="external" href="https://www.w3.org/TR/SVG/struct.html#ImageElement" title="https://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a>):</p>

<ul>
 <li>
  <p>If you do not set the x or y attributes, they will be set to 0.</p>
 </li>
 <li>
  <p>If you do not set the height or width attributes, they will be set to 0.</p>
 </li>
 <li>Having a height or width attribute of 0 will disable rendering of the image.</li>
</ul>

<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
Revert to this revision