Με τις νέες εξαγωγές SVG του Figma, λιγότερο = περισσότερο

Γιατί απομακρύνθηκε από τα μυθιστορήματα SVG

Εικόνα που δημιουργήθηκε για το Figma από τον Peter Herbert Barnaba

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

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

Γιατί τα εργαλεία αποδίδουν τα ίδια SVGs τόσο διαφορετικά

Το SVG - το οποίο αντιπροσωπεύει το Scalable Vector Graphics - είναι μια ολοένα και πιο δημοφιλής μορφή εικόνας για 2D διανυσματικά γραφικά. Εμφανίστηκε το 2001 ως ανοικτή προδιαγραφή που προοριζόταν κυρίως για χρήση σε προγράμματα περιήγησης ιστού. Σε αντίθεση με τις παραδοσιακές μορφές εικόνας bitmap όπως JPG και PNG που γίνονται θολές κατά την αλλαγή μεγέθους, το SVG είναι σχεδιασμένο να παραμένει πάντα κρυστάλλινο.

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

Εδώ είναι το τρίξιμο όμως: δεν υπάρχει τυποποιημένος τρόπος μετατροπής του σήματος SVG σε pixels στην οθόνη.

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

Για παράδειγμα, το SVG διαθέτει μια έξυπνη λειτουργία που σας επιτρέπει να ορίσετε οδηγίες σε ένα μπλοκ και να τις αναφέρετε επανειλημμένα με το στοιχείο . Όπως μάθαμε σκληρά, το Android Studio δεν υποστηρίζει αυτό στις περισσότερες περιπτώσεις.

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

Από το SVG naïveté του Figma ... στη νέα μας ρεαλιστική προσέγγιση

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

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

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

Με τον παλιό μας εξαγωγέα SVG, δημιουργήσαμε αυτό το ενοχλητικό μυθιστόρημα:


 Frame 
 Δημιουργήθηκε χρησιμοποιώντας το Figma 


<μονοπάτι d = "Μ 0 0L 100 0L 100 100L 0 100L 0 0Z" fill = "# FFFFFF" />

















Μετά από πολλή σκληρή δουλειά, καταφέραμε να συμπιέσουμε όλα αυτά σε ένα tweet:


Ας περάσουμε τις μεγαλύτερες αλλαγές μία προς μία:

Πρωτόγονα

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

<μονοπάτι d = "M0 100V0H100V100H0Z" />

Εσωτερικά / εξωτερικά εγκεφαλικά επεισόδια

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

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


<μονοπάτι d = "M0 100V0H100V100H0Z" />

Ελάχιστη σήμανση

Δεν εξάγουμε πλέον καθαρά πληροφοριακά στοιχεία όπως και <g> ή ιδιότητες όπως id και έκδοση.</p><p>Προσθέσαμε επίσης κάποιες έξυπνες ενδείξεις για να αποφύγουμε την σήμανση όταν δεν έχουν αποτέλεσμα. Για παράδειγμα, χρησιμοποιήσαμε πάντοτε ένα <clipPath> για κουμπωτά πλαίσια, αλλά τώρα το κάνουμε μόνο όταν είναι πραγματικά απαραίτητο το clipping.</p><p>Τέλος, τώρα ενσωματώνουμε στοιχεία SVG όπου προηγουμένως έχουμε μια <use> αναφορά σε ένα deduplicated στοιχείο που ορίζεται στο block <defs>. Παρόλο που χάσαμε deduplication, αποδεικνύεται ότι η απλοποιημένη δομή μειώνει το μέγεθος του συνολικού αρχείου στις περισσότερες περιπτώσεις. Αυτό ισχύει ιδιαίτερα όταν τα αρχεία SVG συμπιέζονται με κάτι σαν το gzip.</p><p>Επιλογές εξαγωγής</p><p>Οι νέες προεπιλογές εξαγωγής SVG βελτιστοποιούνται για τις πιο συνηθισμένες περιπτώσεις χρήσης. Για παράδειγμα, οι περισσότεροι από τους χρήστες μας δεν θα χάσουν τα χαρακτηριστικά id, αλλά για όσους από εσάς κάνουν, προχωρήσαμε και προσθέσαμε μια επιλογή. Έχουμε επίσης μια επιλογή για τον έλεγχο της σήμανσης για εγκεφαλικά επεισόδια και αντικείμενα κειμένου.</p><p>Ελπίζουμε ότι τα νέα σύντομα γλυκά SVG της Figma σας αντιμετωπίζουν καλά. Εάν έχετε σχόλια, ενημερώστε μας στα παρακάτω σχόλια!</p></div><div class="neighbor-articles"><h4 class="ui header">Δείτε επίσης</h4><a href="/design/the-mystical-power-of-sacred-geometry-8ef652/" title="Η μυστηριακή δύναμη της Ιερής Γεωμετρίας">Η μυστηριακή δύναμη της Ιερής Γεωμετρίας</a><a href="/design/diy-a-web-version-of-the-fluent-design-system-s-acrylic-material-93ff36/" title="DIY: Μια έκδοση στο Web του Ακρυλικού Υλικού του Σχεδιασμένου με Υψηλό Σχεδιασμό">DIY: Μια έκδοση στο Web του Ακρυλικού Υλικού του Σχεδιασμένου με Υψηλό Σχεδιασμό</a><a href="/design/our-design-workflow-gonna-improve-so-much-with-sketch-libraries-bb5429/" title="Η ροή εργασίας του σχεδιασμού μας θα βελτιωθεί τόσο πολύ με τις Βιβλιοθήκες Sketch! + = ">Η ροή εργασίας του σχεδιασμού μας θα βελτιωθεί τόσο πολύ με τις Βιβλιοθήκες Sketch! + = </a><a href="/design/use-symbol-overrides-to-control-borders-in-sketch-with-ber-tables-b71830/" title="Χρησιμοποιήστε την επιλογή Παράκαμψη συμβόλων για να ελέγξετε τα σύνορα στο σκίτσο με τους πίνακες Über">Χρησιμοποιήστε την επιλογή Παράκαμψη συμβόλων για να ελέγξετε τα σύνορα στο σκίτσο με τους πίνακες Über</a><a href="/design/designing-a-perfect-responsive-configurator-7e25aa/" title="Σχεδιάζοντας έναν τέλειο ανταποκριτή διαμορφωτή">Σχεδιάζοντας έναν τέλειο ανταποκριτή διαμορφωτή</a></div></main><div class="push"></div></div><footer style="height:50px">highresolution-wallpapers.net<!-- --> © <!-- -->2019<!-- --> <a href="https://es.highresolution-wallpapers.net/design/with-figma-s-new-svg-exports-less-more-d15b9e" title="https://highresolution-wallpapers.net">highresolution-wallpapers.net</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>