Latest web development tutorials

Exemples de SVG

Exemples de SVG simples

Un exemple simple graphique SVG:

Voici le fichier SVG (enregistré avec le fichier SVG SVG d'extension):

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

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

SVG analyse de code:

La première ligne contient la déclaration XML. Notez que la propriété autonome! Cet attribut indique si le fichier SVG "est le seul", ou contient une référence à un fichier externe.

standalone = "no" signifie que le document SVG a une référence à un fichier externe - dans ce cas, la DTD.

Le deuxième et troisième ligne fait référence au SVG externe DTD. Le DTD est situé dans "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". Le DTD est situé W3C, contenant tous les éléments SVG admissibles.

code SVG <svg> élément démarrage, y compris tourner <svg> et la balise de fermeture </ svg>. Ceci est l'élément racine. largeur et la hauteur des attributs peut définir la largeur et la hauteur de ce document SVG. attribut version définit la version SVG utilisée, xmlns attribut définit l'espace de noms SVG.

Le SVG <cercle> est utilisé pour créer un cercle. cx et cy attributs définissent le centre du cercle coordonnées x et y. Si vous ignorez ces deux propriétés, le point est réglé sur (0, 0). r attribut définit le rayon du cercle.

accident vasculaire cérébral et attribut stroke-width contrôle la façon dont le contour de la forme. Nous contour du cercle est fixé à 2px larges bordures noires.

remplir propriété de couleur est définie dans la forme. Nous avons mis la couleur de remplissage au rouge.

Fermeture tag ferme l'élément SVG racine et le document lui-même.

Remarque: Toutes les balises d' ouverture doivent avoir des balises de fermeture!