web-dev-qa-db-fra.com

Comment utiliser les fichiers .svg dans une page Web?

Je veux savoir comment utiliser un fichier .svg dans une page Web?

imageimage-manipulationsvgadobe-illustrator
55
Parastar

Voir svgweb quickstart et la page d'accueil du projet svgweb pour quelque chose qui fonctionne dans tous les navigateurs, y compris IE (nécessite un plugin flash).

Il existe de nombreuses façons d'inclure un fichier svg existant:

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

Si tout ce que vous voulez faire est de placer une image SVG telle qu'un logo ou un diagramme statique, il vous suffit de faire attention à fournir une solution de rechange pour les anciennes versions d'Internet Explorer (c'est-à-dire les versions 8 et antérieures).

La méthode la meilleure et la plus simple que j'ai trouvée consiste à utiliser un fichier .png ou .jpg pour votre solution de secours, placé à l'aide d'une balise img normale. Vous encapsulez ensuite la balise img dans une balise d'objet, en utilisant l'attribut data pour placer le SVG.

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

La solution de secours img n'est chargée et utilisée que si le navigateur ne comprend pas SVG.

20
Caspar

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

Le meilleur exemple:

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

Je recommande de mettre le svg en ligne dans votre document (technique html5). Ouvrez simplement votre fichier SVG, copiez la balise SVG et tout ce qu'il contient, puis collez-le dans votre document html.

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

Il a l'avantage que cela vous permet d'utiliser css pour le styliser, comme changer la couleur de remplissage ou lui appliquer des filtres comme le flou. Un autre avantage est que vous enregistrez une requête http pour récupérer le fichier svg s'il se trouve à l'intérieur de votre document.

Si vous voulez par exemple changer sa position en utilisant css, alors vous devez mettre le css à l'intérieur d'un attribut de style. Les styles qui se trouvent dans un fichier CSS externe ne seront pas appliqués dans la plupart des navigateurs car il s'agit d'une restriction de sécurité. Par exemple:

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

Cette technique est prise en charge par tous les navigateurs, à l'exception d'IE8 et versions antérieures, ainsi que par le navigateur Android 2.3 et versions ultérieures).

Lisez le chapitre SVG en ligne pour plus de détails:

Si vous ne voulez pas le mettre en ligne dans votre page, la meilleure alternative semble être la balise object et éviter d'utiliser la balise embed.

Lisez ceci pour plus de détails sur la balise object vs embed vs img:

3
chrisweb

Raphaël — Bibliothèque JavaScript . Belle bibliothèque javascript qui utilise svg et vous offre une large gamme d'effets!

Prend également en charge la plupart des navigateurs, y compris IE

2
code-zoop

L'approche de Caspar est la bonne. Cependant, je déplacerais le repli sur le CSS, car vous voudrez probablement appliquer certains styles au fichier svg lui-même ...

<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

Je suis d'accord avec la réponse de "code-zoop". Bien que cela ne réponde pas techniquement à votre question, cela pourrait aussi être une solution: entrez les données pertinentes directement dans le HTML. Soit directement en tant qu'élément svg, soit en utilisant Raphaël-JS.

Depuis les écoles W3C:

SVG est tous pris en charge dans Firefox, Internet Explorer 9, Google Chrome, Opera et Safari, vous pouvez

<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>

(fin du devis)

Et pour penser encore plus en dehors de la boîte, selon la façon dont vous souhaitez l'utiliser, vous pouvez également mettre vos graphiques 1 couleur dans un webfont. (voir par exemple iconmoon.io)

1
Ideogram