20 Χρήσιμα εργαλεία SVG για καλύτερη γραφική παράσταση

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

Εδώ το 20 εργαλεία που μπορείτε να χρησιμοποιήσετε για να εργαστείτε με το SVG γρήγορα και αποτελεσματικά. Έχουμε ως επί το πλείστον ηλεκτρονικά εργαλεία, που μπορούν να βοηθήσουν στη βελτιστοποίηση, τη μετατροπή, τη δημιουργία μοτίβων και πολλά άλλα.

Διαδραστικό σύστημα συντεταγμένων SVG

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

b64

b64 είναι ένα απλό εργαλείο να βελτιστοποιήσετε τις εικόνες και στη συνέχεια να τις μετατρέψετε στη μορφή base64. Μπορείτε να ρίξετε τις εικόνες σας SVG (άλλες μορφές όπως JPG και PNG δουλεύουν πάρα πολύ) και στη συνέχεια να αρπάξετε το CSS με background-image base64 ως αποτέλεσμα.

SVGO

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

Μπορείτε να εισάγετε το SVGO μέσω npm, $ [sudo] npm install -g svgo ή χρησιμοποιήστε την έκδοση GUI που προσφέρει μεταφορά και απόθεση για να επεξεργαστείτε τη βελτιστοποίηση SVG.

SVG OMG

SVG OMG μετατρέπει τη γραμμή εντολών του SVGO (το προηγούμενο εργαλείο) σε a Έκδοση GUI που είναι πιο διαισθητικό και εύκολο στη χρήση. Μόλις εναλλαγή των κουμπιών για να ενεργοποιήσετε ή να απενεργοποιήσετε κάθε δυνατότητα. Στο τέλος μπορείτε να πάρετε το αποτέλεσμα ως αρχεία εικόνας και κώδικα επίσης.

SVG Τώρα

Όταν εργάζεστε στο Illustrator, το εξαγόμενο SVG περιέχει κάποιες πληροφορίες που δεν είναι απαραίτητες. Με αυτό το εργαλείο θα το κάνετε λάβετε τη βελτιστοποιημένη έκδοση του εξαγόμενου SVG σας από το χώρο εργασίας του Illustrator. Αυτό το εργαλείο προσθέτει έναν πίνακα με ορισμένες επιλογές για τη βελτιστοποίηση του SVG. Μπορείτε να αποκτήσετε το SVG Now από τη σελίδα Creative Add-ons.

Μετατροπέας SVG σε PNG

Θέλω να εξαγωγή αρχείων SVG σε μορφή PNG? Χωρίς να ανοίξετε εφαρμογές όπως το Illustrator για να το κάνετε; Χρησιμοποιήστε αυτό το εργαλείο μετατροπής SVG σε PNG για να αποκτήσετε εξόδους εικόνας σε μορφή PNG και επίσης URI δεδομένων PNG Base64 αν το χρειάζεστε.

SVG Circus

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

SVG Sprite

Το SVG Sprite είναι μια μονάδα Node.js, η οποία βελτιστοποιεί μια δέσμη αρχείων SVG, και τα ψήνει σε τύπους sprite τύπου SVG συμπεριλαμβανομένων των παραδοσιακών διανυσμάτων CSS για εικόνες φόντου ή / και προσκηνίου, κελιές SVG και πολλά άλλα.

Quasi

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

Απλό πρότυπο

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

Trianglify Generator

Δημιουργήστε όμορφα γεωμετρικά μοτίβα SVG με Trianglify Generator. Μπορείτε να ορίσετε την τυχαιότητα / παραλλαγή χρώματος, το μέγεθος κοκκομετρίας και να επιλέξετε μια παλέτα χρωμάτων για την εργασία. Αυτό το εργαλείο είναι μια έκδοση GUI του Trianglify.

Διαβάθμιση SVG

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

Εξαγωγή PSD σε SVG

Εάν χρησιμοποιείτε το Photoshop ως πρόγραμμα επεξεργασίας εικόνων για την εργασία σας, ίσως χρειαστεί κάποιες φορές μετατρέψτε το σχέδιό σας στον εργασιακό χώρο του Photoshop σε SVG, η οποία είναι μη υποστηριζόμενη μορφή στο Photoshop. Κάντε λήψη του σεναρίου σε αυτό το εργαλείο και στη συνέχεια αντιγράψτε στο Adobe Photoshop / προεπιλογές / σενάρια ντοσιέ.

Μετονομάστε ένα όνομα διανυσματικού επιπέδου με την επέκταση SVG (π.χ. layer1 become layer1.svg) και τώρα μπορείτε να εκτελέσετε τη δέσμη ενεργειών από Αρχείο> Σενάρια> PS σε SVG.

Φίλτρα SVG

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

SVG Morpheous

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

Γεννήτρια διαδρομής κλιπ

Το SVG σας επιτρέπει να κάνετε κλικ στο κλιπ εικόνας με το σχήμα. Αυτό είναι πολύ εύκολο αν το σχήμα έχει τη μορφή τετραγώνου ή κύκλου. Αλλά τί αν το σχήμα είναι ένα με πολλά σημεία ή είναι πολυγωνικό σχήμα? Εκεί χρειάζεστε αυτό το εργαλείο Generator Path Path.

Chartist.js

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

Γεννήτρια παύλας SVG

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

Μέθοδος σχεδίασης: Ένας απλός επεξεργαστής SVG

Η μέθοδος Draw είναι ένας επεξεργαστής SVG που βασίζεται στον ιστό, με ένα διαισθητική διασύνδεση που έρχεται με εργαλεία και στις δύο πλευρές του καμβά. Μπορείτε να σχεδιάσετε γραμμές, σχήματα, κείμενο εισόδου ή να χρησιμοποιήσετε ενσωματωμένα σχήματα, και στη συνέχεια να επεξεργαστείτε τις ιδιότητες των σχεδιαζόμενων αντικειμένων. Εξαγωγή της εικόνας σε μορφή SVG (έρχεται επίσης σε μορφή SVG base64) ή αποθήκευση απευθείας στο PNG.

Εξαγωγή Flash σε κινούμενο SVG

Αν και δεν είναι πολύ δημοφιλές πια, υπάρχει μια πιθανότητα ότι κάποιοι από εσάς έχουν έναν σκληρό χρόνο αφήνοντας το Flash. Αν ναι, μπορείτε μετατρέψτε την κινούμενη εικόνα του Flash σε SVG για να διατηρήσετε τη λειτουργία της συμβατά με τις νεότερες τεχνολογίες. Αυτό το εργαλείο αποτελεί επέκταση της εφαρμογής Flash και μπορεί να λειτουργήσει σε CS5, CS6 και CC.

Μπορείτε να εξαγάγετε σε SVG όταν πρόκειται για Σχήματα, Σύμβολα Bitmaps, Κλασσικά Κινούμενα Tweens, Shape Tweens (για άλλους, υπάρχει αδιαμφισβήτητη επιτυχία).