Встроенный контент SVG – SVG Embedded Content

Встроенное содержимое – это содержимое, которое импортируется в документ из другого ресурса. Элементы SVG <image> и <foreignObject> используются для поддержки встроенного контента SVG.

Загрузка и отображение растровых изображений

Элемент SVG <image> позволяет включать и отображать растровые изображения внутри объекта SVG. Он может отображать форматы изображений JPEG, PNG, а также изображения SVG. Атрибуты элемента <image> указывают, что содержимое файла (растровое изображение) должно отображаться в заданном прямоугольнике («окне») в текущей пользовательской системе координат. Основными атрибутами являются:

x и y – координаты верхнего левого угла изображения.

width и height – ширина и высота «окна» для рендеринга изображения. Эти атрибуты являются обязательными.

href и xlink:href – указывают URL-адрес файла изображения.

preserveAspectRatio – управляет масштабированием изображения.

Как использовать элемент SVG <image>? Следующий фрагмент кода показывает, как изображения .png и .svg можно встраивать в документ SVG:

1<svg width="500" height="400" xlink="https://www.w3.org/2000/svg">
2    <image href="https://www.aspose.cloud/templates/aspose/App_Themes/V3/images/svg/272x272/aspose_svg-for-net.png" x="20" y="20" height="180" width="180" />
3    <image href="https://docs.aspose.com/svg/files/shapes.svg" x="250" y="10" height="350" width="350" />
4    <text x="40" y="250">Embedded PNG image</text>
5    <text x="300" y="250">Embedded SVG image</text>
6</svg>

Приведенный выше фрагмент кода отображается следующим образом:

Text «Два изображения, встроенные в svg»

HTML внутри SVG

SVG разработан так, чтобы быть совместимым с другими языками XML для описания и рендеринга встроенного контента. Элемент <foreignObject> позволяет включать в файл SVG элементы из пространства имен, отличного от SVG. В контексте браузера это, скорее всего, HTML. Внешний графический контент можно обрабатывать с помощью преобразований, фильтров, обрезки, маскировки и композиции.

В качестве атрибутов вы должны указать координаты x, y, width и height контейнера <foreignObject>. В противном случае дочерние элементы вообще не будут отображаться.

Давайте посмотрим пример:

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

Text «HTML-элемент, встроенный в документ SVG»

Используя <foreignObject> внутри SVG, вам необходимо указать пространство имен, из которого происходит внешний объект. В этом примере в строке 12 устанавливается:

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

Aspose.SVG предлагает бесплатные веб-приложения SVG для конвертации файлов SVG или изображений, объединения файлов SVG, векторизации изображений, генерации спрайтов SVG, кодирования данных SVG в Base64 и векторизации текста. Эти онлайн-приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и результативно решить ваши задачи, связанные с SVG!

Цвет SVG SVG фильтры и градиенты