SVG στο HTML

Μπορείτε να ενσωματώσετε το στοιχείο SVG απευθείας στην σελίδα HTML

Ενσωμάτωση SVG στο HTML

Παρακάτω είναι ένα παράδειγμα απλού γραφικού SVG:

Λυπάμαι, ο περιηγητής σας δεν υποστηρίζει το SVG inline.

Αυτό είναι ο κώδικας HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Η πρώτη μου SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Δοκιμάστε το προσωπικά

Συνοπτική διήγηση του κώδικα SVG:

  • Η εικόνα SVG ξεκινά με το στοιχείο <svg>
  • Οι ιδιότητες width και height του στοιχείου <svg> καθορίζουν το πλάτος και το ύψος της εικόνας SVG
  • Το στοιχείο <circle> χρησιμοποιείται για να σχεδιάσει έναν κύκλο
  • Οι ιδιότητες cx και cy καθορίζουν τις συντεταγμένες x και y του κέντρου του κύκλου. Αν δεν έχουν ρυθμιστεί το cx και το cy, το κέντρο του κύκλου θα οριστεί ως (0, 0)
  • Η ιδιότητα r καθορίζει το ρadius του κύκλου
  • Οι ιδιότητες stroke και stroke-width ελέγχουν τον τρόπο εμφάνισης του προφίλ της μορφής. Θα ρυθμίσουμε το προφίλ του κύκλου σε πράσινο πλέγμα 4 εικονοστοιχείων
  • Η ιδιότητα fill καθορίζει τον χρώμα εντός του κύκλου. Θα ρυθμίσουμε τον χρώμα της γεωμετρίας σε κίτρινο
  • </svg> ετικέτα κλείσιμο εικόνας SVG

Σημείωση: Ο SVG γράφεται με XML, οπότε όλα τα στοιχεία πρέπει να κλείνουν σωστά!