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

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

55 голосов
/ 06 января 2010

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

Ответы [ 7 ]

45 голосов
/ 06 января 2010

См. 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>
20 голосов
/ 30 октября 2012

Если все, что вы хотите сделать, это разместить изображение 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.

5 голосов
/ 06 января 2010

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/" />
3 голосов
/ 24 сентября 2013

Я рекомендую встроить svg в ваш документ (техника 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:

2 голосов
/ 20 декабря 2013

Подход Каспара является правильным. Однако я бы переместил запасной вариант на 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);
}`
2 голосов
/ 06 января 2010

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

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

1 голос
/ 06 марта 2013

Я бы хотел согласиться с ответом из "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>

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

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

...