mozilla

Revision 530997 of Other content in SVG

  • Revision slug: Web/SVG/Tutorial/Other_content_in_SVG
  • Revision title: Other content in SVG
  • Revision id: 530997
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}

Apart from graphic primitives like rectangles and circles, SVG offers a set of elements to embed other types of content in images as well.

Embedding raster images

Much like the img element in HTML SVG has an image element to serve the same purpose. You can use it to embed arbitrary raster (and vector) images. The specification requests applications to support at least PNG, JPEG and SVG format files.

The embedded picture becomes a normal SVG element. This means, that you can use clips, masks, filters, rotations and all other tools of SVG on the content:

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
</svg>

imagedemo.png

Embedding arbitrary XML

Since SVG is an XML application, you can of course always embed arbitrary XML anywhere in an SVG document. But then you have no means to define how the surrounding SVG should react on the content. Actually, in a conforming viewer it will react in no way at all, the data will simply be omitted. Therefore the specification adds the {{ SVGElement("foreignObject") }} element to SVG. Its sole purpose is to be a container for other markup and a carrier for SVG styling attributes (most prominently width and height to define the space the object will take).

The foreignObject element is a good way to embed XHTML in SVG. If you have longer texts, the HTML layout is more suitable and comfortable than the SVG text element. Another often cited use case is the embedding of formulas with MathML. For scientific applications of SVG this is a very good way to join both worlds.

Note: Please keep in mind, that the content of the foreignObject must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.

Since the foreignObject is an SVG element, you can, like in the case of image, use any SVG goodness with it, which then will be applied to its content.

{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}

Revision Source

<p>{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}</p>
<p>Apart from graphic primitives like rectangles and circles, SVG offers a set of elements to embed other types of content in images as well.</p>
<h3 id="Embedding_raster_images">Embedding raster images</h3>
<p>Much like the img element in HTML SVG has an <code>image</code> element to serve the same purpose. You can use it to embed arbitrary raster (and vector) images. The specification requests applications to support at least PNG, JPEG and SVG format files.</p>
<p>The embedded picture becomes a normal SVG element. This means, that you can use clips, masks, filters, rotations and all other tools of SVG on the content:</p>
<pre>
&lt;svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200"&gt;
  &lt;image x="90" y="-65" width="128" height="146" transform="<strong>rotate(45)</strong>"
     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/&gt;
&lt;/svg&gt;
</pre>
<p><img alt="imagedemo.png" class="internal default" src="/@api/deki/files/4949/=imagedemo.png" /></p>
<h3 id="Embedding_arbitrary_XML">Embedding arbitrary XML</h3>
<p>Since SVG is an XML application, you can of course <em>always</em> embed arbitrary XML anywhere in an SVG document. But then you have no means to define how the surrounding SVG should react on the content. Actually, in a conforming viewer it will react in no way at all, the data will simply be omitted. Therefore the specification adds the <code>{{ SVGElement("foreignObject") }}</code> element to SVG. Its sole purpose is to be a container for other markup and a carrier for SVG styling attributes (most prominently <code>width</code> and <code>height</code> to define the space the object will take).</p>
<p>The <code>foreignObject</code> element is a good way to embed XHTML in SVG. If you have longer texts, the HTML layout is more suitable and comfortable than the SVG <code>text</code> element. Another often cited use case is the embedding of formulas with MathML. For scientific applications of SVG this is a very good way to join both worlds.</p>
<div class="note">
 <strong>Note:</strong> Please keep in mind, that the content of the <code>foreignObject</code> must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.</div>
<p>Since the <code>foreignObject</code> is an SVG element, you can, like in the case of <code>image</code>, use any SVG goodness with it, which then will be applied to its content.</p>
<p>{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}</p>
Revert to this revision