70 votes

Comment utiliser les fichiers .svg dans une page Web?

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

61voto

Erik Dahlström Points 21519

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

25voto

Caspar Points 446

Si tout ce que vous voulez faire est de placer une image SVG, comme un logo ou statique diagramme, vous avez juste besoin d'être prudent afin de fournir une solution de repli pour les anciennes versions d'Internet Explorer (c'est à dire les versions 8 et versions antérieures).

La meilleure et la méthode la plus simple que j'ai trouvé est d'utiliser un .png ou .format jpg de votre secours, placé à l'aide d'une normale de la balise img. Vous enveloppez-vous de la balise img dans une balise d'objet, à l'aide de l'attribut de données 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>

L'img de secours n'est chargé et utilisé si le navigateur ne comprend pas le SVG.

10voto

chrisweb Points 463

Je recommande de mettre le svg inline dans votre document (html5 technique). Il suffit d'ouvrir votre fichier SVG, copiez la balise SVG et tout insideof, et puis de le coller dans votre document html.

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

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

Si vous voulez par exemple changer sa position à l'aide de css, alors vous devez mettre le css à l'intérieur d'un attribut de style. Styles dans un fichier css externe ne sera pas appliquée dans la plupart des navigateurs, car c'est une restriction de sécurité. Par exemple:

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

Cette technique est pris en charge par tous les navigateurs, sauf IE8 et ci-dessous ainsi que l'android 2.3 navigateur et ci-dessous.

Lire le chapitre inline SVG pour plus de détails:

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

Lire ceci pour plus de détails au sujet de l'objet vs intégrer vs balise img:

6voto

Brian McKenna Points 10754

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

3voto

code-zoop Points 3734

Bibliothèque Raphaël-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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X