it-swarm.com.ru

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

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

55
Parastar

Смотрите быстрый запуск svgweb и домашняя страница проекта svgweb , чтобы узнать, что работает во всех браузерах, включая IE (требуется флэш-плагин).

Есть много способов включить существующий файл SVG:

  • <img src="your.svg"/>
  • <object data="your.svg"/>
  • <iframe src="your.svg"/>
  • <embed src="your.svg"/>
  • <div style="background:url(your.svg)">...</div>
45
Erik Dahlström

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

20
Caspar

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/" /> 
5
Brian McKenna

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

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

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

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

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

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

Прочтите главу в формате SVG для получения более подробной информации:

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

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

3
chrisweb

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

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

2
code-zoop

Подход Каспара является правильным. Однако я бы переместил запасной вариант на 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
Jerome

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

1
Ideogram