10 χρυσοί κανόνες για την ανταποκρινόμενη SVGS

Τα πολλά πλεονεκτήματα του SVG - συμπεριλαμβανομένων των απεριόριστα κλιμακωτά εικόνες διάνυσμα, μικρά μεγέθη αρχείων και άμεση ενσωμάτωση με το DOM - το κάνουν φυσικό κατάλληλο για σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές . Παρά την προδιαγραφή SVG να είναι μια δεκαετία παλιά, είναι σχετικά πρόσφατη υποστήριξη σε πολλά προγράμματα περιήγησης και εργαλεία σημαίνει ότι εξακολουθούν να υπάρχουν πολλά κόλπα, κενά και gotchas που αιώνουν ακόμη και έμπειρους σχεδιαστές ιστοσελίδων και προγραμματιστές.

Εδώ, περίμενα το πιο σημαντικό από αυτά ως 10 χρυσά κανόνες.

01. Ρυθμίστε σωστά τα εργαλεία σας

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

Πρώτον, εκτός αν υπάρχουν επιτακτικοί λόγοι για να κάνετε διαφορετικά, ρυθμίστε τις μετρήσεις στα «εικονοστοιχεία» στο εργαλείο φορέα σας. Ενώ δεν έχει σημασία το SVG (το οποίο θα μετρήσει το προβολή και τα στοιχεία ευτυχώς σε σχεδόν οποιοδήποτε σύστημα μέτρησης) έχει νόημα να αναπτυχθεί το σχέδιο SVG χρησιμοποιώντας κοινές μονάδες CSS, αντί της προεπιλογής εκτύπωσης των ίντσες. και το κάνει επίσης πολύ πιο εύκολο να προσθέσετε @μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ερωτήματα και άλλες παρεμβάσεις αργότερα.

Μην κάνετε την περιοχή καμβά κάθε μεγαλύτερη από ό, τι πρέπει να είναι. Όπως και οι εικόνες Bitmap, οποιοσδήποτε «κενός χώρος» στο SVG δεν θα χρησιμοποιηθεί και είναι καλύτερα υποκατεστημένο με περιθώρια CSS. Σημειώστε ότι πολλά εργαλεία διάνυσμα, όπως το σκίτσο, θα «καλλιεργούν» την περιοχή καμβά σε επιλεγμένα στοιχεία.

Ταυτόχρονα, μην καλλιεργείτε την περιοχή καμβά στις ακριβείς άκρες στοιχείων. Η αντιαλασία θα εξακολουθεί να εφαρμόζεται στο SVG, και το κόψιμο του πολύ κοντά μπορεί επίσης να συγκρούσει την αντιαλασία. Αντ 'αυτού, αφήστε τουλάχιστον 2px καθαρό όπου η άκρη του καμβά έρχεται κοντά σε ένα στοιχείο.

Η ανταπόκριση και η απόδοση είναι στενά συνδεδεμένες, επομένως καθορίζουν τη δεκαδική ακρίβεια να μην υπερβαίνει τα δύο σημεία. Το SVG δεν σκέφτεται σε ακέραιους, οπότε ένα σημείο διάνυσμα μπορεί να έχει τιμή 1.45882721px. Αυτή η ακραία ακρίβεια είναι απολύτως περιττή, και προσθέτει μόνο σε κώδικα bloat και μέγεθος αρχείου, οπότε είναι καλύτερο να το κολυμπήσετε σε αυτό το σημείο.

Ομοίως, τραβήξτε διανυσματικά σχήματα χρησιμοποιώντας όσο το δυνατόν λιγότερα σημεία. Πολλοί νέοι σχεδιαστές υποθέτουν ότι περισσότεροι πόντοι είναι καλύτεροι, όταν το αντίστροφο είναι πραγματικά αλήθεια: μερικά σημεία, τοποθετημένα καλά, παρέχουν μεγαλύτερο έλεγχο σε ένα στοιχείο, μειώνοντας επίσης το μέγεθος του αρχείου.

Εάν δίνετε αρχεία φορέα που δεν ακολουθούν αυτόν τον κανόνα, μην ανησυχείτε - περισσότερο διάνυσμα τέχνη Οι εφαρμογές έχουν μια επιλογή "απλούστευση", μπορείτε να χρησιμοποιήσετε για να μειώσετε τον αριθμό των σημείων σε ένα στοιχείο χωρίς να αλλάξετε το σχήμα του. Εναλλακτικά, για λεπτομερή εργασία θα πρότεινα ένα plugin όπως η διαδοχική γραφική παράσταση.

02. Αφαιρέστε τα χαρακτηριστικά ύψους και πλάτους

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

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & GT;
& lt; - Κωδικός SVG εδώ - & GT;
& lt; / svg & gt; 

Για τους σκοπούς μας, η πιο σημαντική πτυχή είναι η αφαίρεση του πλάτος και ύψος Χαρακτηριστικά που οι περισσότερες εφαρμογές περιλαμβάνουν αυτόματα. Αυτό κάνει το SVG να ανταποκρίνεται πλήρως στα σύγχρονα προγράμματα περιήγησης.

Εάν επεξεργάζεστε πολλά svgs, ή είστε σε μια βιασύνη, δεν χρειάζεται να ολοκληρώσετε αυτό το βήμα με το χέρι. Αντ 'αυτού, μπορείτε να ακολουθήσετε τις προτάσεις που ορίζονται στον τρίτο χρυσό κανόνα ...

03. Βελτιστοποιήστε και καθορίστε την έξοδο SVG

Όποιο εργαλείο χρησιμοποιείτε για να δημιουργήσετε το περιεχόμενο SVG, εξακολουθεί να είναι αξίζει να επεξεργαστείτε την έξοδο του μέσω ενός εργαλείου όπως Svgomg , που θα κόψει τον κώδικα σημαντικά. Συνήθως, μπορείτε να εξοικονομήσετε περίπου 20 έως 80% σε μέγεθος αρχείου. Ο ίδιος κώδικας μπορεί να ενσωματωθεί τοπικά ως έργο Gulp ή Grunt .

04. Τροποποιήστε τον κώδικα για το IE

Ο κανόνας 2 ανέφερε ότι η σωστή βελτιστοποιημένη SVGS ανταποκρίνεται πλήρως στα σύγχρονα προγράμματα περιήγησης. Αυτό ισχύει αν μετρήσουμε το Microsoft Edge ως ένα σύγχρονο πρόγραμμα περιήγησης. Για το IE 9-11, έχουμε μερικά θέματα για την αντιμετώπιση. Εάν χρησιμοποιούμε το SVG ως εικόνα:

 & lt; img src = "countdown.svg alt =" αντίστροφη μέτρηση "& gt; 

Μπορούμε να αναγκάσουμε το IE9-11 να εμφανίσει σωστά την εικόνα χρησιμοποιώντας τον επιλογέα χαρακτηριστικών CSS:

 IMG [SRC $ = "SVG"] {Πλάτος: 100%;} 

Οι εικόνες SVG λειτουργούν καλά στη γενική παραγωγή, αλλά έχουν περιορισμένη διαδραστικότητα: τα περισσότερα προγράμματα περιήγησης θα αγνοήσουν τη διαδραστικότητα και την κινούμενη εικόνα μέσα σε ένα svg που τοποθετείται σε μια σελίδα ως ένα . Επιπλέον, οι εικόνες SVG αποτελούν επιπλέον αίτημα HTTP για το πρόγραμμα περιήγησης.

Για αυτούς και άλλους λόγους, η SVG χρησιμοποιείται όλο και περισσότερο inline. Στην περίπτωση αυτή, ο κώδικας SVG χρειάζεται λίγο περισσότερη θεραπεία για το IE:

 & lt; Body & GT;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" creasheaspectratio = "xmidymin slice" & gt; 

Επιπρόσθετα με constryaspectratio Χαρακτηριστικό, δηλαδή χρειάζεται λίγο πιο καθοδήγηση για τη διατήρηση της σωστής κλιμάκωσης της εικόνας: Πάρτε το πλάτος του SVG ( 365 σε αυτή την περίπτωση), χωρίστε το με το ύψος ( 525 ) και πολλαπλασιάστε το αποτέλεσμα κατά 100%. Αυτό θα γίνει το βυθός Αξία για το SVG, "Propping" είναι αρκετά ανοιχτό στο δηλ. Για να εμφανιστεί το SVG στη σωστή αναλογία διαστάσεων:

 & lt; Body & GT;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
conteaseaspectratio = "xmidymin φέτα"
Style = "Πλάτος: 100%; padding-bottom: 69,52%. Ύψος: 1px; υπερχείλιση: ορατό" & gt; 

Σημειώστε ότι, για να διατηρήσετε τα πράγματα συνοπτικά και σαφή, τα δείγματα κώδικα στο υπόλοιπο αυτό το άρθρο δεν περιλαμβάνουν αυτές τις αλλαγές. Η Amelia Bellamy-Royds έχει γράψει ένα Εξαιρετικό άρθρο σχετικά με την κλιμάκωση SVG .

05. Εξετάστε το SVG για το κείμενο του ήρωα

Αυτή τη στιγμή δεν υπάρχει πρότυπο CSS για το μέγεθος του κειμένου στο δοχείο του. Είναι δυνατόν να κλιμακωθεί το κείμενο χρησιμοποιώντας μονάδες VW, αλλά αυτό θα απαιτήσει σχεδόν πάντα τουλάχιστον δύο παρεμβάσεις ερωτημάτων μέσων σε «σφιγκτήρα» το κείμενο σε ορισμένα όρια προβολής. Ωστόσο, το κείμενο SVG θα αλλάξει αυτόματα σε ένα δοχείο αυτόματα:

 & LT; Header & GT;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; text x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / header & gt; 

Το CSS:

 Κεφαλίδα SVG κείμενο {
Γραμματοσειρά: 900; Μέγεθος γραμματοσειράς: 90px; Συμπληρώστε: μπλε?
} 

Κρατώντας το SVG inline διατηρεί την προσβασιμότητα και την τιμή SEO και επιτρέπει το κείμενο να είναι στυλ χρησιμοποιώντας οποιαδήποτε γραμματοσειρά που έχει ήδη ενσωματωθεί στη σελίδα. Βλέπω εδώ Για περισσότερες πληροφορίες.

06. Αφήστε το πλάτος και το ύψος στη θέση τους για προοδευτικά εικονίδια

Μια εξαίρεση στον κανόνα 2 είναι εικονίδια και μικρά λογότυπα, τα οποία πρέπει να διατηρήσουν τους πλάτος και ύψος Χαρακτηριστικά εάν θέλετε να ενισχυθούν προοδευτικά:

 & lt; ένα href = "http://codepen.io" & gt;
    & lt; ρόλος SVG = "img" aria-label = "codepen" πλάτος = "50" Ύψος = "50" & gt;
        & lt; τίτλος & gt; codepen & lt; / τίτλος & gt;
        & lt; χρήση xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& LT; SVG Style = "Οθόνη: Κανένα;" & GT;
    & lt; σύμβολο id = "codepen" viewbox = "0 0 50 50" & gt;
        & lt; path d = "..." / & gt;
    & lt; / symbol & gt;
& lt; / svg & gt; 

Μπορείτε να δείτε ένα παράδειγμα αυτής της τεχνικής σε δράση εδώ .

Εάν μεγέθους μόνο τα εικονίδια SVG με το CSS και το φύλλο στυλ του ιστότοπου δεν φορτώνεται, τα εικονίδια θα εμφανιστούν στο προεπιλεγμένο μέγεθος ενός αντικατασταθέντος στοιχείου: 300px x 150px. Διατηρώντας το ύψος και το πλάτος ως χαρακτηριστικά, μπορούμε να τα μεγιστοποιήσουμε στο πλησιέστερο λογικό μέγεθος αφής από προεπιλογή και να χρησιμοποιήσουμε το CSS μας για να ενισχυθεί ο τρόπος που παρουσιάζονται.

07. Χρησιμοποιήστε εφέ φορέα για να διατηρήσετε τα μαλλιά

Από προεπιλογή, η SVG ζυγίζει τα πάντα με το παράθυρο προβολής, συμπεριλαμβανομένου του πάχους εγκεφαλικού επεισοδίου. Συνήθως αυτό λειτουργεί καλά, αλλά σε ορισμένες περιπτώσεις - τα διαγράμματα και τα εγκεφαλικά επεισόδια που εφαρμόζονται ως αποτελέσματα στο εξωτερικό του κειμένου ειδικότερα - μπορεί να θέλετε να κρατήσετε εγκεφαλικά επεισόδια το ίδιο πάχος, ανεξάρτητα από το μέγεθος του σχεδίου. Αυτός είναι ο τομέας του ελάχιστα γνωστού διάνυσμα-αποτέλεσμα ιδιοκτησία, τα οποία μπορούν να εφαρμοστούν ως χαρακτηριστικό παρουσίασης ή σε CSS:

 Διαδρομή {
    Συμπληρώστε: #FFF; εγκεφαλικό επεισόδιο: # 111;
    Πλάτος εγκεφαλικού επεισοδίου: 2;
    διάνυσμα-αποτέλεσμα: μη-κλιμάκωση-εγκεφαλικό επεισόδιο.
} 

Ρίξε μια ματιά στο ένα πλήρες παράδειγμα αυτής της τεχνικής .

08. Θυμηθείτε bitmaps

Πολλοί προγραμματιστές υποθέτουν ότι η SVG μπορεί να χρησιμοποιήσει μόνο φορείς, αλλά οι JPEGs και PNGs μπορούν επίσης να εφαρμοστούν σε ένα σχέδιο SVG. Και εφ 'όσον έχετε παρακολουθήσει τους κανόνες μου μέχρι στιγμής, αυτές οι εικόνες θα ανταποκρίνονται όταν προσθέτετε ένα bitmap μέσω του ετικέτα:

 & lt · πλάτος εικόνας = "1024" Ύψος = "768" xlink: href = "lake-louise.jpg" x = "1300" y = "150" ρόλος = "εικόνα" τίτλος = "crowsnest pass" & gt; & lt; / image & gt; 

09. Εξετάστε τις προσαρμοστικές λύσεις

Κάνοντας τα πράγματα να πάνε «squish» είναι μόνο ένα μέρος του σχεδιασμού που ανταποκρίνεται. Αυτό που το RWD είναι περίπου, με τη μεγαλύτερη αίσθηση του προσαρμοστικού σχεδιασμού, παρουσιάζει κατάλληλο περιεχόμενο σε όλα τα μεγέθη προβολής.

Αυτό μπορεί να επιτευχθεί με διάφορους τρόπους. Το ResponsiveLogos.co.uk παρέχει μια σειρά από παραδείγματα που χρησιμοποιούν SVG Sprites, αλλά προτιμώ να ενσωματώσω ερωτήματα μέσων στο SVG για να δημιουργήσω αυτό που ονομάζω "μονάδες επωνυμίας". Αυτή η προσέγγιση επιτρέπει να προσθέσω, να αφαιρέσει και να τροποποιήσω την ορατότητα των εξαρτημάτων. Διαβάστε περισσότερα για τις προσαρμοστικές μονάδες branding στο άρθρο μου .

Αυτή η ίδια τεχνική μπορεί να χρησιμοποιηθεί για διαγράμματα, εικονογραφήσεις, χάρτες και πολλά άλλα. Στις απλούστερες ενότητες, το ίδιο το CSS μπορεί να γραφτεί μέσα στο SVG, καθιστώντας το να χρησιμοποιηθεί παντού, όπως περιγράφεται στον προηγούμενο κανόνα.

10. Ενσωματώστε ερωτήματα μέσων σε SVG

Πολλοί άνθρωποι δεν γνωρίζουν ότι τα ερωτήματα CSS Media μπορούν να γραφτούν μέσα στο ίδιο το SVG:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; στυλ & gt;
SVG G {Μετάβαση: 1S; }
@media όλα και (μέγιστο πλάτος: 90rem) {
#drink, # Coke {αδιαφάνεια: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; διαδρομή d = "m109.6 ... & gt; 

Είναι σημαντικό να σημειωθεί ότι το ερώτημα των μέσων μαζικής ενημέρωσης μπορεί να «βλέπει» το στοιχείο που βρίσκεται μέσα: δηλαδή, οποιαδήποτε μέτρηση σχετίζεται με το ίδιο το στοιχείο, όχι τη σελίδα. Ένα πιθανό μειονέκτημα αυτής της προσέγγισης είναι ότι η περιοχή καμβά του SVG θα παραμείνει πάντα η ίδια, σε σχέση με τα στοιχεία μέσα σε αυτό.

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

συμπέρασμα

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

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 283; Αγοράστε το εδώ !

Σχετικά Άρθρα:

• 12 πρέπει να έχετε εργαλεία ελέγχου κώδικα
• Ακονίστε τις δεξιότητες σκίτσων σας
• Supercharge SVG Animations με GSAP