HTML5 Inline SVG

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

Τι είναι το SVG;

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

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

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

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

Υποστήριξη του περιηγητή

O Internet Explorer 9, Firefox, Opera, Chrome και Safari υποστηρίζουν 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.