SVG σε σελίδα HTML

Τα αρχεία SVG μπορούν να ενσωματωθούν σε έγγραφα HTML με τις ετικέτες: <embed>, <object> ή <iframe>.

SVG σε σελίδα HTML

Παρακάτω, θα δείτε τρεις διαφορετικές μεθόδους για την ενσωμάτωση αρχείων SVG σε σελίδες HTML.

Χρήση της ετικέτας <embed>

Η ετικέτα <embed> υποστηρίζεται από όλους τους κύριους περιηγητές και επιτρέπει τη χρήση script.

Σημείωση:Όταν ενσωματώνετε SVG σε σελίδα HTML χρησιμοποιώντας την ετικέτα <embed>, είναι η προτεινόμενη μέθοδος από τον Adobe SVG Viewer! Ωστόσο, αν χρειάζεστε για να δημιουργήσετε νόμιμο XHTML, δεν μπορείτε να χρησιμοποιήσετε την ετικέτα <embed>. Δεν υπάρχει ετικέτα <embed> σε καμία κανονιστική του HTML.

Γλώσσα:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Σημείωση:Η ιδιότητα pluginspage δείχνει την URL για τη λήψη του plugin.

Χρήση της ετικέτας <object>

Η ετικέτα <object> είναι μια προκαθορισμένη ετικέτα του HTML 4, υποστηριζόμενη από όλους τους πιο πρόσφατους περιηγητές. Η μειονεκτικότητά της είναι ότι δεν επιτρέπει τη χρήση script.

Σημείωση:Εάν έχετε εγκαταστήσει την τελευταία έκδοση του Adobe SVG Viewer, τότε όταν χρησιμοποιείτε την ετικέτα <object>, το αρχείο SVG δεν λειτουργεί (τουλάχιστον δεν λειτουργεί στο IE)!

Γλώσσα:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Σημείωση:Η ιδιότητα codebase δείχνει την URL για την κατεβάσματα του πρόσθετου.

Χρήση του στοιχείου <iframe>

Το στοιχείο <iframe> λειτουργεί σε πολλούς προγράμματα περιήγησης.

Γλώσσα:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Ελπίζω....

Αν μπορούσαμε να προσθέσουμε στοιχεία SVG μεταξύ τους μέσω της αναφοράς του ονόματος του χώρου SVG, θα ήταν εξαιρετικό, όπως αυτό:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>