SVG Embedded Content

Embedded content is content that imports into the document from another resource. SVG <image> and <foreignObject> elements are used for SVG embedded content support.

Loading and Displaying Bitmaps

The SVG <image> element allows to include and render bitmaps within an SVG object. It can display image formats JPEG, PNG and the SVG pictures too. Attributes of the <image> element indicate that the contents of a file (a bitmap) should be displayed into a given rectangle (“window”) within the current user coordinate system. The main attributes are:

x and y – the coordinates of the top-left image corner.

width and height – the width and the height of the “window” for image render. These attributes are required.

href and xlink:href – points at a URL for the image file.

preserveAspectRatio – controls how the image is scaled.

How to use the SVG <image> element? The following code snippet shows as a .png and .svg images can embed inside the SVG document:

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <image href="https://docs.aspose.com/svg/images/svg.png" x="20" y="20" height="180" width="180" />
    <image href="https://docs.aspose.com/svg/files/shapes.svg" x="250" y="10" height="350" width="350" />
    <text x="40" y="250">Embedded PNG image</text>
    <text x="300" y="250">Embedded SVG image</text>
</svg>

The above code snippet is displayed like this:

HTML inside SVG

SVG is designed to be consistent with other XML languages for describing and rendering of embedded content. The <foreignObject> element allows to include in SVG file the elements in a non-SVG namespace. In the context of a browser, it is most likely HTML. The foreign graphical content can be processed with transformations, filters, clipping, masking and compositing.

As attributes, you must specify the x, y coordinates, width and height of the <foreignObject> container. Otherwise, the child elements will not display at all.

Let’s see an example:

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <style>
        div {
            color: grey;
            font: 14px serif;
            }
    </style>
    <circle cx="65" cy="60" r="60" fill="red" fill-opacity="0.1" />
    <!-- example of  HTML text embedding in SVG -->
    <foreignObject x="20" y="20" width="200" height="180">
    <!--In the context of HTML embedded in the SVG document, the XHTML namespace is mandatory-->
        <div xmlns="https://www.w3.org/1999/xhtml">
        Convert SVG to PNG. Aspose.SVG for .NET can read and convert SVG files to PNG, PDF, XPS, and major image formats. 
        </div>
    </foreignObject>
</svg>

Using the <foreignObject> inside SVG, you need to specify the namespace from which the foreign object originates. In this example, it sets in line 12:

<div xmlns="https://www.w3.org/1999/xhtml">

Aspose.SVG offers SVG Free Web Applications for converting SVG or image files, merging SVG files, image vectorizing, SVG sprite generating, SVG to Base64 data encoding, and text vectorizing. These online Apps work on any operating system with a web browser and don’t require additional software installation. It’s a fast and easy way to efficiently and effectively solve your SVG-related tasks!