SVG в HTML / CSS

Question

Ну, у меня есть файл SVG с именем 7.svg.

Как я могу отобразить изображение с HTML или CSS в моем index.html?

Answer 1

Ну, вы можете сделать это тремя разными способами.

Использование тега <embed>

<embed src="7.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Использование тега <object>

<object data="7.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Использование тега <iframe>

<iframe src="7.svg" width="300" height="100">
</iframe>

Скажи мне, какой из них подходит для тебя. Пожалуйста, запустите его в разных браузерах и дайте мне знать.

HTML 5 информация:

Поскольку вы используете HTML 5, вы, вероятно, захотите проверить это: http://www.whatwg.org/specs/web-apps/current-work/#svg Он все еще работает и частично реализован в Firefox, Safari, Opera (только для сериализации xhtml5)

https://developer.mozilla.org/en/svg_in_html_introduction

Answer 2

<img> теги поддерживают SVG. Просто добавьте <img src="/path/to/svg.svg"> на страницу.

Пример .

Возьмите под свой контроль размер с помощью CSS.

Answer 3

Добавьте это в ваш HTML-файл

<embed src="7.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

взято из w3schools