Главная страница>Учебник по веб-дизайну>Учебник по HTML

4 способа добавления изображений SVG на веб-страницы HTML

Автор：Eve Cole Время обновления：2024-12-18 10:41:14

При разработке веб-приложений используются изображения SVG. Подводя итог, можно выделить четыре способа:

1. Вставьте прямо на страницу. 2. Введение тега img. 3. Знакомство с CSS. 4. Вводится тег объекта.

1. Непосредственно вставьте на страницу

На страницах html вы можете напрямую использовать теги svg.

<!DOCTYPE html>
<html>
	<голова>
		<мета-кодировка="utf-8">
		<title></title>
	</голова>
	<тело>
		<!-- Изображение в формате SVG-->
		<svg width="200" height="150" style="border: 1px сплошной стальной синий">
			<!-- Внутри прямоугольник -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</тело>
</html>

Эффект операции:

1

2. Введение тега img

Помимо написания тегов SVG непосредственно на веб-странице, вы также можете импортировать их через img, точно так же, как импортируете изображения в формате JPEG и PNG.

1) Создайте новое изображение SVG.

Затем нам нужно сначала создать новый файл изображения svg и использовать svg, написанный непосредственно на веб-странице выше:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
	<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

Здесь есть два различия в содержании:

1. Вам необходимо объявить атрибут пространства имен xmlns. Пространство имен можно перечислить в справочных материалах в конце этой статьи. 2. Удален стиль, изначально написанный в теге svg, style="border: 1px Solid Steelblue".

Сохраните содержимое в файле test.svg. Это файл изображения. Вы можете попробовать открыть его в браузере.

2) Импортируйте с помощью тега img.

Предположим, что test.svg и файл веб-страницы находятся в одном каталоге:

<img src="test.svg" style="border: 1px сплошной стальной синий" />

Подобно использованию jpeg и png, вы можете напрямую установить путь к изображению с помощью атрибута src. Кроме того, мы переместили исходный стиль svg в тег img.

Эффект от бега такой же, как указано выше:

2

В Интернете есть много изображений SVG. Вы можете обратиться к https://www.iconfont.cn, хорошему веб-сайту с иконками.

3

3. введение в CSS

Введение в CSS заключается в том, чтобы представить изображение в качестве фонового изображения:

<style type="text/css">
	.svg {
		ширина: 200 пикселей;
		высота: 150 пикселей;
		граница: 1 пиксель, сплошной стальной синий;
		фоновое изображение: url(test.svg); // Импортируем как фон }
</стиль>
<div class="svg"></div>

4. введение объекта

Как и при импорте img, вам понадобится файл svg, а затем импортируйте его с данными атрибутов:

<object data="test.svg" style="border: 1px сплошной стальной синий"></object>

Эффект бега аналогичен описанному выше, картирования больше нет.

Другие теги

Хотя можно использовать и другие теги, такие как теги embed и iframe, их использование не рекомендуется. Подробную информацию см. в ссылках, перечисленных в конце этой статьи.

Ссылки

Пространство имен: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

тег для вставки: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

Тег iframe: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

На этом завершается статья о четырех способах внедрения изображений svg в веб-страницы HTML. Для получения дополнительной информации о внедрении изображений svg в HTML выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы прочитаете больше. в будущем поддержите downcodes.com!

Связанные статьи