Ένας παράδειγμα SVG

Το SVG γράφεται με XML.

Παράδειγμα SVG

Το παρακάτω παράδειγμα είναι ένα παράδειγμα απλού αρχείου SVG. Τα αρχεία SVG πρέπει να αποθηκεύονται με την επέκταση .svg:

<?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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Δείτε το παράδειγμα (μόνο για περιηγητές που υποστηρίζουν SVG)

(Για να δείτε τον κώδικα πηγής του SVG, ανοίξτε αυτό το παράδειγμα και κάντε δεξί κλικ στο παράθυρο. Επιλέξτε "Προβολή κώδικα πηγής".)

Επεξήγηση κώδικα:

Η πρώτη γραμμή περιέχει την αναφορά XML. Προσέξτε την ιδιότητα standalone! Η ιδιότητα αυτή καθορίζει αν το αρχείο SVG είναι "αυτόνομο" ή περιέχει αναφορές σε εξωτερικά αρχεία.

standalone="no" σημαίνει ότι το έγγραφο SVG θα αναφέρεται σε ένα εξωτερικό αρχείο - εδώ, είναι το αρχείο DTD.

Τα δεύτερο και τρίτο ριζάρια αναφέρονται σε αυτόν τον εξωτερικό SVG DTD. Το DTD βρίσκεται στο "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". Το DTD βρίσκεται στο W3C και περιλαμβάνει όλα τα επιτρεπόμενα στοιχεία SVG.

Το κώδικα SVG ξεκινά με το στοιχείο <svg>, περιλαμβάνει την ανοιχτή ετικέτα <svg> και την κλειστή ετικέτα </svg>. Αυτό είναι το ρίζα στοιχείο. Οι παραμέτρους width και height μπορούν να ρυθμίσουν το πλάτος και το ύψος του εγγράφου SVG. Η παραμέτρος version μπορεί να ορίσει την έκδοση του SVG που χρησιμοποιείται, η παραμέτρος xmlns ορίζει το όνομα χώρο SVG.

Το SVG <circle> χρησιμοποιείται για τη δημιουργία ενός κύκλου. Οι παραμέτρους cx και cy ορίζουν τις συντεταγμένες x και y του κέντρου του κύκλου. Αν παραλειφθούν αυτές οι παραμέτρους, ο κύκλος θα τοποθετηθεί στο σημείο (0, 0). Η παραμέτρος r ορίζει το ρadius του κύκλου.

Η ιδιότητα stroke και η stroke-width ελέγχουν τον τρόπο εμφάνισης του περίβλημα της μορφής. Ρυθμίζουμε το περίβλημα του κύκλου σε 2px πλάτος, με μαύρη ορίστρα.

Η ιδιότητα fill ρυθμίζει τον χρώμα μέσα στη μορφή. Ρυθμίζουμε τον χρώμα της πλήρωσης σε κόκκινο.

Η λειτουργία της κλειστής ετικέτας είναι να κλείσει το στοιχείο SVG και το έγγραφο του ίδιου.

Σημείωση:Όλες οι ανοιχτές ετικέτες πρέπει να έχουν αντίστοιχες κλειστές ετικέτες!