Χρησιμοποιώ το , ή για αρχεία SVG;

Πρέπει να χρησιμοποιήσω το <img>, το <object>, ή το <embed> για τη φόρτωση αρχείων SVG σε μια σελίδα με τρόπο παρόμοιο με τη φόρτωση ενός jpg, gif ή png;

Ποιος είναι ο κώδικας για το καθένα ώστε να διασφαλιστεί ότι λειτουργεί όσο το δυνατόν καλύτερα; (Στην έρευνά μου βλέπω αναφορές στο να συμπεριλάβω το mimetype ή να δείξω σε fallback SVG renderers και δεν βλέπω μια καλή αναφορά για την κατάσταση της τεχνολογίας).

Υποθέτω ότι ελέγχω για υποστήριξη SVG με το Modernizr και υποχωρώ (πιθανώς κάνοντας αντικατάσταση με μια απλή ετικέτα <img>) για προγράμματα περιήγησης που δεν έχουν δυνατότητα SVG.

artlung
Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2018 в 4:05
Προγραμματισμός
svg vector-graphics html
Κάνε Δεκέμβριος 2010 в 3:50
26 προβολές
Λύση

Μπορώ να συστήσω το SVG Primer (που δημοσιεύθηκε από το W3C), το οποίο καλύπτει αυτό το θέμα: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

Αν χρησιμοποιήσετε το `` τότε έχετε δωρεάν* την αναδρομή σε μορφή ράστερ:

*) Λοιπόν, όχι ακριβώς δωρεάν, επειδή μερικά προγράμματα περιήγησης κατεβάζουν και τους δύο πόρους, δείτε την πρόταση του Larry'παρακάτω για το πώς να το παρακάμψετε αυτό.

2014 update:

  • Αν θέλετε ένα μη-διαδραστικό svg, χρησιμοποιήστε `` με fallbacks σεναρίου στην έκδοση png (για παλαιότερους IE και android < 3). Ένα καθαρό και απλό τρόπος για να το κάνετε αυτό:

``.

Αυτό θα συμπεριφέρεται όπως μια εικόνα GIF, και αν το πρόγραμμα περιήγησής σας υποστηρίζει δηλωτικά κινούμενα σχέδια (SMIL), τότε αυτά θα αναπαράγονται.

  • Αν θέλετε ένα διαδραστικό svg, χρησιμοποιήστε είτε το <iframe> είτε το ``.

  • Εάν πρέπει να παρέχετε σε παλαιότερους φυλλομετρητές τη δυνατότητα χρήσης ενός plugin svg, τότε χρησιμοποιήστε το ``.

  • Για svg σε css background-image και παρόμοιες ιδιότητες, το modernizr είναι μια επιλογή για τη μετάβαση σε εφεδρικές εικόνες, μια άλλη είναι η εξάρτηση από πολλαπλά φόντα που το κάνει αυτόματα:

     div {
     background-image: url(fallback.png),
     background-image: url(your.svg), none,
 }

    Σημείωση: η στρατηγική πολλαπλών φόντων δεν λειτουργεί στο Android 2.3 επειδή υποστηρίζει πολλαπλά φόντα αλλά όχι svg..

Μια επιπλέον καλή ανάγνωση είναι αυτό το blogpost σχετικά με τα svg fallbacks.

Erik Dahlström
Επεξεργασμένη απάντηση Κάνε Φεβρουάριος 2015 в 8:04
Σχόλια (24)

Από τον IE9 και πάνω μπορείτε να χρησιμοποιήσετε SVG σε μια συνηθισμένη ετικέτα IMG..

https://caniuse.com/svg-img

Volker E.
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2018 в 3:21
Σχόλια (4)

Τα και έχουν μια ενδιαφέρουσα ιδιότητα: καθιστούν δυνατή την απόκτηση μιας αναφοράς σε έγγραφο SVG από εξωτερικό έγγραφο (λαμβάνοντας υπόψη την πολιτική ίδιας προέλευσης). Η αναφορά αυτή μπορεί στη συνέχεια να χρησιμοποιηθεί για την εμψύχωση του SVG, την αλλαγή των φύλλων στυλ του, κ.λπ.

Δεδομένου του

Στη συνέχεια μπορείτε να κάνετε πράγματα όπως

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a 
    rect.setAttribute("fill", "green");
});
Σχόλια (5)