Les partenaires publicitaires:

Comment utiliser SVG en html

Fichiers Scalable Vector Graphic (SVG) sont une méthode alternative d'afficher les é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 affichées sur des écrans de différentes résolutions. De haute qualité site logos, bannières et icônes peuvent être créés et affichés en utilisant la technologie SVG.

Préparer environnement de test

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

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

  3. Cliquez sur une zone en dehors du champ de texte pour enregistrer le nom du dossier nouvellement créé. Un dossier avec le nom "SVG dossier Test" est désormais 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

  1. Repérez le nouveau document vide qui a été créé par l'application d'éditeur de texte natif. Si aucune somme n'a été créé automatiquement, accédez à "Fichier" puis sélectionnez "Nouveau" ou "Nouveau document" à partir de la liste des options qui apparaît.

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

  3. Sélectionnez le code suivant (y compris les "Start Here" et "End ici"):

    En utilisant SVG intérieur HTML

    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;

    }

    Intégrer # S {

    margin: 0px 10px 10px 75px;

    }

    En utilisant SVG intérieur HTML

  4. Appuyez sur "Ctrl" et "C" simultanément pour copier le code mis en évidence 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 le presse-papiers du système d'exploitation.

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

  6. Naviguez sur le bureau en utilisant la fenêtre de l'explorateur dans la boîte de dialogue qui apparaît.

  7. Naviguer et sélectionner "SVG dossier test" en utilisant la fenêtre de l'explorateur de fichier qui contient la liste des fichiers qui se trouvent sur le bureau.

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

  9. Appuyez sur "OK" lorsque vous avez terminé. Un nouveau document appelé "SVG.html" devrait maintenant être situé dans le "SVG dossier test," qui est sur le bureau.

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

Créer un document SVG

  1. Cliquez sur la fenêtre de l'application éditeur de texte originaire de ramener l'application dans le foyer.

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

  3. Sélectionnez le code suivant (y compris les "Start Here" et "End ici"):



    lt;? xml version = "1.0" standalone = "no">

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

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

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

  4. Appuyez sur "Ctrl" et "C" simultanément pour copier le code mis en évidence 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 le presse-papiers du système d'exploitation.

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

  6. Naviguez sur le bureau en utilisant la fenêtre de l'explorateur de fichier dans la boîte de dialogue qui apparaît.

  7. Naviguer et sélectionner "SVG dossier test" en utilisant la fenêtre de l'explorateur de fichier qui contient la liste des fichiers qui se trouvent sur le bureau.

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

  9. Appuyez sur "OK" lorsque vous avez terminé de commettre l'arrêt. Un nouveau document appelé "circles.svg" est maintenant situé dans le dossier test SVG, qui est sur le bureau.

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

Fichiers test

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

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

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

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

  5. Vérifiez que d'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.

  6. Conseils Avertissements

    • Si l'exemple est pas essayer de visionner le document 'de svg.html' dans un autre navigateur travaille. Tous les navigateurs ne sont pas compatibles avec SVG.
    • De nombreuses versions de l'application de navigateur Web natif qui vient 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 test SVG sur le bureau.
» » » » Comment utiliser SVG en html