SVG ICON SET IMPORT

SVG ICON SET IMPORT

import svg website

Γενικά από την στιγμή που γίνανε ευρέως γνωστά τα svg στο web πιστεύουμε ότι όποιος δεν χρησιμοποιεί τα vectors icons για διάφορα icon elements της ιστοσελίδας του και για το logo του, το σφάλμα του είναι απλά πολύ μεγάλο! Ποιος είναι ο καλύτερος τρόπος όμως για να κάνεις εισαγωγή ένα svg icon στην ιστοσελίδα σου;

Ο ΚΑΛΥΤΕΡΟΣ ΤΡΟΠΟΣ ΓΙΑ ΝΑ ΚΑΝΕΙΣ ΕΙΣΑΓΩΓΗ ΕΝΟΣ SVG ΣΤΟ SITE ΣΟΥ

Εάν περιμένετε να γράψω κάτι τρελό ή κάτι περίεργο δυστυχώς θα σας απογοητεύσω καθώς ο καλύτερος τρόπος είναι να εισάγετε στην ιστοσελίδα σας απλά το svg με την κανονική του μορφή π.χ.

<?php include(“/icons/icon-facebook.svg”); ?>

ΚΑΙ ΤΙ ΚΕΡΔΙΖΟΥΜΕ;

Και τώρα έρχεται η επόμενη ερώτηση που έχει να κάνει με το τι κερδίζω με αυτή την απλότητα που θα μπορούσε κάποιος να μην την αναφέρει καν ως τρόπο για την εισαγωγή ενός svg.

  1. Δεν χρησιμοποιούμε περίεργα εργαλεία για να φτιάξουμε ένα svg sprite (π.χ.  gulp) τα οποία μερικές φορές κατά την δημιουργία του sprite δημιουργούν σφάλματα.
  2. Δεν εισάγουμε εκτός από το icon που θέλουμε κανένα άλλο , έτσι και πλέον με την έλευση του  Http/2 που πλέον με λίγα λόγια και πααάρα πολύ περιληπτικά ίσως να είναι καλύτερο να έχουμε πολλές μικρές εικόνες  αντί για ένα μεγάλο sprite εισάγουμε μόνο αυτό το svg που θέλουμε σε κάθε σελίδα . Έτσι δεν χρειάζεται να κατεβάσουμε σε μια σελίδα όλο το icon set μας και να έχουμε αργότερα loading times και χρήση του bandwidth του server μας.
  3. Δεν έχουμε cross-browser προβλήματα συμβατότητας !
  4. Τέλος δεν έχουμε προβλήματα στην επιλογή id ή class στο shadow dom καθώς είναι πολύ συχνό φαινόμενο.

Posted on Ιούνιος 28, 2017 in informative

Back to Top