Как использовать .svg файлы на веб-странице?

Я хочу знать, как можно использовать файл .svg на веб-странице?

Ответ 1

Смотрите svgweb quickstart и стартовая страница проекта svgweb для что-то, что работает во всех браузерах, включая IE (требуется Flash-плагин).

Существует множество способов включить существующий файл svg:

<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>

Ответ 2

Если вы хотите разместить SVG-изображение, например логотип или статическую диаграмму, вам просто нужно быть осторожным, чтобы обеспечить резерв для более старых версий Internet Explorer (например, версий 8 и более ранних версий).

Самый лучший и самый простой метод, который я нашел, - использовать .png или .jpg для вашего резервного копирования, помещенного с помощью обычного тега img. Затем вы переносите тег img в тег объекта, используя атрибут data для размещения SVG.

<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

Возврат img загружается и используется только в том случае, если браузер не понимает SVG.

Ответ 3

http://www.w3schools.com/svg/svg_inhtml.asp

Лучший пример:

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

Ответ 4

Библиотека Raphaël-JavaScript. Хорошая библиотека javascript, использующая svg, и дает вам широкий спектр эффектов!

Также поддерживает большинство браузеров, включая IE

Ответ 5

Я рекомендую поместить svg inline в ваш документ (метод html5). Просто откройте свой SVG файл, скопируйте тег SVG и все в нем, а затем вставьте его в свой html-документ.

<html>
    <body>
        <svg></svg>
    </body>
</html>

Это имеет то преимущество, что это позволяет использовать CSS для его стилизации, например, изменение цвета заливки или применение фильтров к нему, как размытие. Еще одно преимущество заключается в том, что вы сохраняете один HTTP-запрос для извлечения файла svg, если он находится внутри вашего документа.

Если вы хотите, например, изменить свою позицию с помощью css, тогда вы должны поместить css внутри атрибута style. Стили, которые находятся во внешнем файле css, не будут применяться в большинстве браузеров, поскольку это ограничение безопасности. Например:

<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>

Этот метод поддерживается всеми браузерами, кроме IE8 и ниже, а также браузером android 2.3 и ниже.

Подробнее читайте в главе SVG:

Если вы не хотите размещать его на своей странице, лучшим вариантом является тег объекта и избегать использования тега embed.

Прочтите это для более подробной информации об объекте vs embed vs img tag:

Как добавить масштабируемую векторную графику на вашу веб-страницу

Ответ 6

Каспар подход является правильным. Тем не менее, я бы переместил резервную копию в CSS, так как вы, вероятно, захотите применить некоторые стили к самому файлу svg...

<object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

CSS

.no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`

Ответ 7

Я хотел бы согласиться с ответом от "code-zoop". Хотя это технически не отвечает на ваш вопрос, это может быть также решение: введите соответствующие данные прямо в HTML. Прямо как элемент svg, или используя Raphaël-JS.

Из w3c-школ:

SVG поддерживается в Firefox, Internet Explorer 9, Google Chrome, Opera и Safari вы можете

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

(конец цитаты)

И чтобы подумать еще не о том, как вы его используете, вы можете разместить свою 1-цветную графику в webfont. (см., например, iconmoon.io)