HTML5 Inline SVG

Το HTML5 υποστηρίζει το ενσωματωμένο SVG.

Τι είναι το SVG;

  • SVG σημαίνει Εκτετασμένα Βαριά Γραφικά (Scalable Vector Graphics)
  • SVG χρησιμοποιείται για την ορισμό γραφικών βασισμένων σε ακτίνες για το δίκτυο
  • Το SVG χρησιμοποιεί τη μορφή XML για τη διαμόρφωση γραφικών
  • Οι εικόνες SVG δεν χάνουν ποιότητα όταν μεγαλώνουν ή αλλάζουν μέγεθος
  • Το SVG είναι πρότυπο του W3C

Πλεονεκτήματα του SVG

Σε σύγκριση με άλλες μορφές εικόνας (π.χ. JPEG και GIF), τα πλεονεκτήματα της χρήσης του SVG είναι:

  • Οι εικόνες SVG μπορούν να δημιουργηθούν και να τροποποιηθούν με επεξεργαστές κειμένων
  • Οι εικόνες SVG μπορούν να αναζητηθούν, να καταγράφονται, να προγραμματίζονται ή να συμπιεστούν
  • Το SVG είναι επεκτάσιμο
  • Το SVG μπορεί να εκτυπώνεται σε οποιαδήποτε λύψη με υψηλή ποιότητα
  • Το SVG μπορεί να μεγαλώνεται χωρίς να χάνει την ποιότητα της εικόνας

Υποστήριξη του Προγράμματος Περιήγησης

O Internet Explorer 9, Firefox, Opera, Chrome και Safari υποστηρίζουν το inline SVG.

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

Στο HTML5, μπορείτε να ενσωματώσετε στοιχεία SVG απευθείας σε σελίδες HTML:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

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

Αποτελέσματα:

Εκμάθηση SVG

Για να μάθετε περισσότερα για το SVG, επισκεφθείτε το Εκμάθηση SVG.