Comment utiliser SVG dans HTML

fichiers Scalable Vector Graphic (SVG) sont une méthode alternative d'affichage des éléments graphiques dans un navigateur Web. SVG est utilisé pour afficher les éléments graphiques qui ne perdent pas leur qualité à la loupe ou redimensionnés ou vu sur les écrans avec des résolutions différentes. De haute qualité site logos, bannières et icônes peuvent être créées et affichées en utilisant la technologie SVG.

Instructions

Préparer l'environnement de test

1 Faites un clic droit sur le bureau du système d'exploitation. Dans le menu pop-up, sélectionnez "Nouveau dossier" ou "Créer un nouveau dossier" dans la liste des options.

2 Entrez le nom "SVG Folder Test" dans le champ de texte qui a été mis en évidence à l'étape précédente.

3 Cliquez sur une zone en dehors de la zone de texte pour enregistrer le nom du dossier nouvellement créé. Un dossier avec le nom "SVG Folder Test" est maintenant présent sur le bureau.

4 Démarrez l'application éditeur de texte natif qui est livré avec le système d'exploitation. Pour Windows, démarrez "Bloc-notes", et sur Mac OSX, utilisez "TextEdit." Pour les distributions Linux, choisir soit "Gedit." "Pico", "vi" ou "Emacs."

Créer un document HTML

5 Localisez le nouveau document vide qui a été créé par l'application d'éditeur de texte natif. Si aucun n'a été créé automatiquement, accédez à "Fichier" puis sélectionnez "Nouveau" ou "Nouveau document" dans la liste des options qui apparaissent.

6 Cliquez dans la fenêtre de saisie de texte dans le nouveau document.

7 Sélectionnez le code suivant (y compris "Start Here" et "End Here"):

<! - Commencez ici ->

<Html>

&lt;head>

& Lt; title> Utiliser SVG intérieur HTML & lt; / title>

& Lt; le style>

body {

margin: 50px 0px; padding: 0px;

text-align: center;

}

div # content {

largeur: 500px;

margin: 0px auto;

text-align: center;

padding: 15px;

border: 1px solid #ccc;

background-color: #fafafa;

}

incorporez # S {

margin: 10px 0px 10px 75px;

}

& Lt; / style>

& Lt; / head>

& Lt; body>

& Lt; div id = "content">

& Lt; h1> Utilisation SVG intérieur HTML & lt; / h1>

& Lt; embed id = "S" et "C" simultanément pour copier le code en surbrillance dans le presse-papiers du système d'exploitation. Si vous utilisez Mac OSX, appuyez sur "Cmd" et "C" simultanément au lieu de "Ctrl" et "C" Cette autre action copie également le code en surbrillance pour le presse-papiers du système d'exploitation.

9 Cliquez sur "Fichier" -> "Enregistrer sous."

dix Accédez à l'ordinateur de bureau en utilisant la fenêtre de l'explorateur dans la boîte de dialogue qui apparaît.

11 Naviguer et sélectionnez "SVG Folder Test" en utilisant la fenêtre de l'explorateur de fichier qui contient la liste des fichiers qui se trouvent sur le bureau.

12 Localisez le champ de texte "Enregistrer sous" et entrez "SVG.html."

13 Appuyez sur "OK" lorsque vous avez terminé. Un nouveau document appelé "SVG.html" devrait maintenant se trouver dans le "SVG dossier test", qui est sur le bureau.

14 Vérifiez que le "Enregistrer sous" boîte de dialogue a disparu.

Créer un document SVG

15 Cliquez sur la fenêtre de l'application éditeur de texte natif pour ramener l'application dans le foyer.

16 Accédez à "Fichier". Sélectionnez "Nouveau" ou "Nouveau document" dans la liste des options qui apparaissent.

17 Sélectionnez le code suivant (y compris "Start Here" et "End Here"):

<! - Commencez ici ->

<? Xml version = "1.0" standalone = "no"?>

<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN"

"Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<Largeur svg = hauteur "100%" = "100%" version = "1.1"

xmlns = "http://www.w3.org/2000/svg">

<Cercle cx = "100" cy = "50" r = course "40" = "black"

stroke-width = "2" fill = "blue" />

</ Svg>

<! - End ici ->

18 Appuyez sur "Ctrl" et "C" simultanément pour copier le code en surbrillance dans le presse-papiers du système d'exploitation. Si vous utilisez Mac OSX, appuyez sur "Cmd" et "C" simultanément au lieu de "Ctrl" et "C" Cette autre action copie également le code en surbrillance pour le presse-papiers du système d'exploitation.

19 Cliquez sur "Fichier" -> "Enregistrer sous."

20 Accédez à l'ordinateur de bureau en utilisant la fenêtre de l'explorateur de fichier dans la boîte de dialogue qui apparaît.

21 Naviguer et sélectionnez "SVG Folder Test" en utilisant la fenêtre de l'explorateur de fichier qui contient la liste des fichiers qui se trouvent sur le bureau.

22 Localisez le champ de texte "Enregistrer sous" et entrez "circles.svg."

23 Appuyez sur "OK" lorsque vous avez terminé de commettre la sauvegarde. Un nouveau document appelé "circles.svg" est maintenant situé dans le dossier de test SVG, qui est sur le bureau.

24 Vérifiez que le "Enregistrer sous" boîte de dialogue a disparu.

fichiers test

25 Minimiser les deux documents ouverts, "circles.svg" et "SVG.html," de sorte que le bureau est clairement visible.

26 Double-cliquez sur le dossier "Dossier test SVG." Une nouvelle fenêtre d'exploration des fichiers apparaît.

27 Faites un clic droit sur le fichier nommé "SVG.html" et naviguez jusqu'à "Ouvrir avec". Sélectionnez un navigateur SVG compatible dans la liste des applications qui apparaissent. Consultez la section "Conseils" de cette façon à pour plus d'informations.

28 Attendez que le navigateur Web compatible SVG pour commencer et rendre "SVG.html." Une nouvelle fenêtre de navigateur apparaît.

29 Vérifiez qu'un cercle bleu avec un contour noir est affiché dans le milieu de la fenêtre du navigateur. Cela indique que la tâche a été achevée avec succès.

Conseils et avertissements

  • Si l'exemple est pas essayer de visionner le document «svg.html» dans un autre navigateur fonctionne. tous les navigateurs ne sont pas compatibles avec SVG.
  • De nombreuses versions de l'application de navigateur Web natif qui est livré avec le système d'exploitation Windows, Internet Explorer, ne rendent pas SVG. Installez un navigateur Web compatible SVG afin de compléter cet exemple. Firefox, Chrome et Opera sont les navigateurs qui fournissent un soutien pour les graphiques vectoriels adaptables.
  • Double-vérifiez que la svg.html et les fichiers circle.svg sont stockés dans le même dossier - Dossier de test SVG sur le bureau.