Ο τελικός οδηγός για το SVG

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

Οι εικόνες με σταθερά μεγέθη όπως αρχεία JPG, GIF και PNG έχουν τη θέση τους στον Ιστό, αλλά η εγγενής στατική τους φύση συγκρούεται με τον τρόπο που γίνεται ο Ιστός. Καθώς προχωράμε σε ανταποκρινόμενα, ρέοντα σχέδια, τόσο πιο ενοχλητικό παίρνει να ασχοληθεί με εικόνες που δεν ανταποκρίνονται θεμελιωδώς. Είναι απογοητευτικό πέρα ​​από την πεποίθηση όταν συνειδητοποιώ ότι γίνεται πλέον η καλύτερη πρακτική να δημιουργήσετε και να εξυπηρετήσετε πολλές διαφορετικές εκδόσεις κάθε εικόνας στον ιστότοπό σας.

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

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

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

Γνωρίστε το αρχείο SVG ...

Τι είναι το SVG και γιατί πρέπει να το χρησιμοποιήσετε;

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

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

Με άλλα λόγια, είναι ειδικά σχεδιασμένα για να χρησιμοποιούνται παράλληλα με άλλες τεχνολογίες ιστού. Είναι τέλεια για εμάς.

Στα τέλη της δεκαετίας του '90, η Macromedia και η Microsoft (και άλλες εταιρείες) εισήγαγαν VML , και στη συνέχεια παρουσίασε η Adobe (και άλλες εταιρείες) PGML ως πιθανές λύσεις για εικόνες φορέα σε ιστότοπους στο W3C (και ενδεχομένως ως εναλλακτικές λύσεις στην παλιά μορφή PostScript). Το W3C είπε: "Όχι, θα κάνουμε το δικό μας πράγμα. αλλά ευχαριστώ για τις ιδέες! "Το αποτέλεσμα ήταν το Ομάδα εργασίας SVG.

Τον Σεπτέμβριο του 2001, το SVG 1.0 έγινε επίσημη σύσταση του W3C και το υπόλοιπο είναι ιστορικό. Περίπου. Ο Internet Explorer καθυστέρησε υιοθετώντας τη μορφή SVG, προκαλώντας έκπληξη σε κανέναν. Έκτοτε, έχουν υπάρξει ενημερώσεις για κινητές συσκευές, και περισσότερο με διευκρινίσεις.

Ακόμα και τώρα, η Ομάδα Εργασίας SVG δημιουργεί το SVG 2, το οποίο θα περιλαμβάνει περισσότερη ενοποίηση με θέματα όπως HTML5, CSS και τη μορφή γραμματοσειράς WOFF.

Έχει υποστήριξη

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

Ολοκλήρωση αγοράς caniuse.com για μια πιο εμπεριστατωμένη ανάλυση του τι λειτουργεί και τι δεν κάνει σε ποια προγράμματα περιήγησης.

Όλα ανταποκρίνονται ... ή πρέπει να είναι

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

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

Προσιτότητα

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

Μπορεί να σας βοηθήσει να προστατέψετε τον ιστότοπό σας από το μέλλον

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

SVG Tutorials & How-tos

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

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

Σημείωση: Λάβετε υπόψη ότι τα αρχεία SVG είναι όλα κώδικες XML, έτσι ώστε πολλά από αυτά τα μαθήματα να είναι επικεντρωμένα στους προγραμματιστές ή απλώς να έχουν πολύ κώδικα σε αυτά. Έχουμε συμπεριλάβει και τα δύο σεμινάρια που εστιάζονται στα βασικά και στις συγκεκριμένες, δημιουργικές χρήσεις του SVG, γι 'αυτό μην παραλείψετε αυτό το μέρος.

• Χρήση του SVG: ο Chris Coyier γράφει για χρόνια CSS και HTML tutorials με εύκολη κατανόηση στο css-tricks.com. Του primer στο SVG δεν είναι διαφορετική. Θα συμπεριλάβω συνδέσμους με πολλές βασικές εξηγήσεις και μαθήματα, αλλά αυτό είναι όπου θα ξεκινούσα. Αυτό το σεμινάριο περιλαμβάνει βασικές οδηγίες για τους χρήστες του Adobe Illustrator.
• Πώς να ξεκινήσετε με το SVG: Θα είμαι remiss εάν δεν συμπεριλάμβανα Συνεισφορά της WDD στην εκπαίδευση SVG. Η φανταστική Sara Vieira καλύπτει τη δημιουργία γραφικών, την εξαγωγή, τον καθαρισμό του κώδικα, τη μετακίνηση των παρουσιάσεων σε αρχεία CSS και πολλά άλλα.
• Ανάλυση Ανεξαρτησίας Με το SVG: Αν είναι σχετικό με το διαδίκτυο, τότε το Smashing Magazine έχει πιθανώς ένα άρθρο σχετικά με αυτό. Καλύπτουν το βασικά στοιχεία της μορφής SVG με το συνηθισμένο στυλ και προσοχή στη λεπτομέρεια.
• Scalable Vector Graphics (μια σειρά από άρθρα): Το Hongkiat.com είναι ένας άλλος πόρος για την ποιότητα της διαδικτυακής και γραφιστικής μάθησης. Αντί να παρέχουν μόνο ένα μεγάλο άρθρο, έχουν δημοσιεύσει μια ολόκληρη σειρά από αυτά από τον Thoriq Firdaus. Τα αγγλικά είναι μερικές φορές λείπουν, αλλά οι οδηγίες είναι ακόμα σαφείς και κατανοητές.
• Sara Soueidan: Σχεδίαση και κινούμενη γραφική παράσταση διανυσματικών διανυσμάτων με CSS: Αυτό είναι ένα βίντεο μιας παρουσίασης που δίνεται στο CSSconf EU 2014. Σε αυτό, η Sara Soueidan παρέχει μια σειρά από συμβουλές, τεχνάσματα και ακόμη και μερικά hacks για την εφαρμογή στυλ και animation στο SVG στο διαδίκτυο. Έχει διάρκεια μισής ώρας, ώστε να είναι άνετα και να κρατάτε κάτι για να κάνετε σημειώσεις με το χέρι σας. Αξίζει εντελώς τον χρόνο σας.
• Εξαγωγή SVG για τον ιστό με το Adobe Illustrator CC: Οι χρήστες του Adobe Illustrator πρέπει έλεγξε αυτό. Ένα από τα blogs της Adobe δίνει λεπτομερείς και εννοώ πολύ λεπτομερείς οδηγίες σχετικά με τον τρόπο εξαγωγής αρχείων SVG για τον Ιστό. Μάθετε πώς μπορείτε να τις βελτιστοποιήσετε μέχρι το μικρότερο μέγεθος αρχείου για το Web.
• SVGBasics: Αυτό ολόκληρη την ιστοσελίδα είναι αφιερωμένο στη διδασκαλία των ανθρώπων πώς να δημιουργήσουν γραφικά SVG από την αρχή με την XML. Συστήνω αυτό για όσους ασχολούνται με την πραγματική back-end - ή ακόμα και front-end - της κάθε ιστοσελίδας. Η γνώση του τρόπου με τον οποίο λειτουργεί ο κώδικας μπορεί να διαρκέσει πολύ για την επίλυση των προβλημάτων κατά τη διάρκεια της πτήσης.
• SVG Tutorial από τον Jakob Jenkov: Ένας άλλος προγραμματιστής-κεντρικός σύνολο σεμιναρίων, εδώ. Η μεγάλη διαφορά; Ο συγγραφέας περιελάμβανε εκδόσεις βίντεο για κάθε τμήμα. Αν μάθετε καλύτερα έχοντας τα γραφικά και τον ήχο για να παρακολουθήσετε τα μαθήματά σας, αυτό είναι ένα καλό μέρος για να ξεκινήσετε.
• Η απλή εισαγωγή στο SVG Animation: Ο τίτλος λέει όλα. Ο Ντέιβιντ Γουόλς εξηγεί πώς να ρυθμίσετε το δικό σας Τα στοιχεία SVG για κινούμενα σχέδια, που αποδίδει στη χρήση για διαφορετικά στοιχεία, ποιες βιβλιοθήκες θα χρησιμοποιήσουν και άλλα. Δεν είναι ένας πλήρης οδηγός, αλλά θα σας παρουσιάσει τις βασικές έννοιες που είναι απαραίτητες για να ξεκινήσετε την κίνηση.
• Μια εισαγωγή στο animation SVG: Αυτό το σεμινάριο πηγαίνει σε λίγο περισσότερη λεπτομέρεια για το πώς ακριβώς να πάει για την κίνηση των SVG αντικειμένων σας. Εκτός από αυτό, αντιμετωπίζει μερικά κοινά θέματα που ενδέχεται να αντιμετωπίσετε όταν κάνετε κινούμενα σχέδια, οπότε αξίζει να το διαβάσετε.
• Πώς να: Εξαγωγή πολλαπλών εικονιδίων σε αρχεία SVG από το Adobe Illustrator: Δημιουργία ενός συνόλου εικονιδίων SVG στο Illustrator; Κρατώντας τα όλα σε ένα αρχείο του Illustrator; Εξαγωγή όλων στα ξεχωριστά αρχεία τους με ένα μόνο κλικ.
• Animate Text με διαδρομές SVG: Ακριβώς αυτό που λέει στον τίτλο. Πάρτε το κινούμενο σχέδιο σας, ίσως να το χρησιμοποιήσετε σε ένα λογότυπο. Αυτό σίγουρα φαίνεται αρκετά δροσερό ...
• Ζωντανά εικονίδια SVG με CSS3 & JavaScript: Μια από τις μεγαλύτερες χρήσεις του SVG είναι για εικονίδια και με καλό λόγο. Κάντε ένα αρχείο, χρησιμοποιήστε το οπουδήποτε στον ιστότοπο ή την εφαρμογή σας, σε οποιοδήποτε μέγεθος. Τι περισσότερο θα μπορούσατε να ζητήσετε; Αυτό το σεμινάριο σας δείχνει πώς να ζωντανέψετε αυτά τα εικονίδια με το hover.
• Δημιουργία ενός κλιμακούμενου SVG Infographic: Τα Infographics είναι ένας από τους αγαπημένους τρόπους του Διαδικτύου να καταναλώνει γεγονότα αυτές τις μέρες. Γιατί όχι να είναι απείρως κλιμακωτά; Ρίξτε σε κάποια κινούμενη εικόνα, και θα μπορούσατε πολύ καλά να φυσήξετε κάποια μυαλά.
• Κάνοντας ένα κουμπί SVG HTML Burger: Πείτε τι θα κάνετε σχετικά με το κουμπί χάμπουργκερ, πιθανότατα δεν θα πάτε πουθενά. Μπορείτε επίσης χρησιμοποιήστε SVG και κινούμενα σχέδια για να το κάνετε το πιο λαμπερό, πιο ωραίο κουμπί χάμπουργκερ που μπορείτε. Αυτός καλύπτει τον τρόπο με τον οποίο θα ζωντανέψουν τα μονοπάτια και τα εγκεφαλικά επεισόδια για να μετατραπεί ένα κουμπί κυριολεκτικά σε άλλο, ώστε να το δούμε.
• Snap.svg Παραδείγματα και Tutorials: Αυτός είναι ένας οδηγός στη χρήση της βιβλιοθήκης JavaScript Snap.svg (ανατρέξτε στην ενότητα "Εργαλεία" παρακάτω). Έχει σχεδιαστεί για να σας βοηθήσει να ξεκινήσετε με τη δημιουργία στοιχείων SVG στο JS και να τα animate, καθιστώντας τα αλληλεπιδραστικά και ούτω καθεξής.
• Εισαγωγή στο Raphaël.js: Το Raphaël.js είναι μία από τις μεγάλες βιβλιοθήκες JavaScript που σχετίζονται με το SVG και αυτό το άρθρο σας διδάσκει πώς να το χρησιμοποιήσετε. (Και πάλι, ανατρέξτε στην ενότητα Εργαλεία παρακάτω.)
• Κινούμενο εικονίδιο SVG: Οι άνθρωποι μοιάζουν πολύ με τα κινούμενα εικονίδια, έτσι ώστε να μπορείτε να μάθετε κάθε προσέγγιση για να τους κάνετε ότι μπορείτε. Εδώ βλέπουμε τη βιβλιοθήκη Snap.svg σε δράση άλλη μια φορά, καθώς ο δημιουργός δημιουργεί και έπειτα ζωντανεύει ένα κουμπί αναπαραγωγής πολυμέσων.
• Αποκοπή σε CSS και SVG - Η ιδιότητα και το στοιχείο διαδρομής κλιπ: Εδώ είναι ένα ωραίο μακρύ άρθρο σχετικά με το πώς να χρησιμοποιήσετε το SVG clipping για να κάνετε εικόνες μέσα σε σχήματα και εικόνες μέσα σε τεράστιο κείμενο. Μπορεί να εξετάσει τη χρήση του για να κάνει μεγάλες φανταχτερά τίτλους που είναι SEO φιλικό, επειδή οι μηχανές αναζήτησης μπορούν να τα διαβάσουν.
• Δημιουργία απαντήσεων SVG με CSS: Παρόλο που τα αρχεία SVG είναι άπειρα κλιμακούμενα, οι μέθοδοι που χρησιμοποιούνται για την τοποθέτησή τους σε μια ιστοσελίδα μπορούν μερικές φορές να προκαλέσουν προβλήματα. Αυτό το σεμινάριο από codrops εξηγεί πώς να διορθώσετε τα διάφορα προβλήματα που μπορεί να αντιμετωπίσετε.
• Ένταση επίδρασης σχήματος με SVG: Δημιουργήστε μια ομαλή και αριστοκρατική εμφάνιση κινούμενο φαινόμενο αιώρησης για προεπισκοπήσεις εικόνων. ( Δείτε το demo. ),
• Ένα Primer SVG για τους Φυλλομετρητές του σήμερα από το W3C: Δεν είναι τελευταίο, και σίγουρα όχι λιγότερο, έχουμε έναν πόρο που παρέχεται από τους ανθρώπους που ήρθαν με ολόκληρη τη μορφή SVG στην πρώτη θέση: το W3C. Δεν είναι ένα βασικό φροντιστήριο ή μια εισαγωγή. Σύμφωνα με τον πρόλογο, δημιουργήθηκε για επαγγελματίες προγραμματιστές, γραφίστες με "έντονη τεχνική κλίση", και άλλοι που δεν έχουν το μυαλό να κατεβαίνουν στο νιτρινοκόκκινο.
• SVG Tutorial από MDN: Όπως SVGBasics, αυτό είναι ένα μάλλον εκτενές σεμινάριο, που παρέχεται από το δίκτυο προγραμματιστών του Mozilla. Εκτενής, όπως είναι, το ίδιο το φροντιστήριο θεωρείται "υπό ανάπτυξη". Για παράδειγμα, αυτή τη στιγμή μπορεί να δει στη σελίδα "Φίλτρα", η οποία είναι κενή. Σύμφωνα με την ίδια τη σελίδα, το σεμινάριο βρίσκεται σε πρώιμο στάδιο ανάπτυξης. Αν είστε σε θέση, παρακαλώ βοηθήστε έξω με τσιπ και γράφοντας μια ή δύο παραγράφους. Επιπλέον σημεία για τη σύνταξη ολόκληρης της σελίδας.

Εργαλεία SVG

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

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

Μια γρήγορη αναζήτηση Google για "εργαλεία SVG" επιστρέφει "Περίπου 37.000.000 αποτελέσματα", έτσι ξέρετε ότι υπάρχουν πολλά εκεί έξω.

Πού λοιπόν, πρέπει να ξεκινήσετε;

Premium εφαρμογές

Τα μεγάλα ονόματα στη δημιουργία γραφικών υποστηρίζουν όλα τα SVG. Adobe Illustrator,Corel Draw, ακόμη και από διάφορα προϊόντα Χάρα - Ναι, η Xara εξακολουθεί να είναι κάτι - μπορούν να εισάγουν, να επεξεργάζονται και να αποθηκεύουν αρχεία με τη μορφή. (Το Illustrator είναι γνωστό ότι βάζει κάποια περίεργα πράγματα στα αρχεία SVG, ωστόσο, πρέπει να είστε προσεκτικοί με τις ρυθμίσεις εξαγωγής.)

Inkscape

Εάν δεν χρησιμοποιείτε ήδη ένα πακέτο γραφικών διανυσμάτων, Inkscape είναι ένα φανταστικό μέρος για να ξεκινήσετε. Δημιουργήθηκε το 2003 ως πύλη ενός άλλου έργου ανοιχτού κώδικα που ονομάζεται Sodipodi (το οποίο βασίστηκε σε ένα ακόμη έργο OSS), το Inkscape έχει γίνει το πρότυπο για δωρεάν λογισμικό διανυσματικών γραφικών διαμέσου πλατφόρμας. Δεν είναι τόσο γεμάτο χαρακτηριστικά όπως το Adobe Illustrator, αλλά είναι περισσότερο από αρκετό για τα περισσότερα διανυσματικά έργα.

Serif DrawPlus Starter Edition

Ελαφρή γραμμή είναι μια εταιρεία που κάνει αρκετά καλή δημιουργία γραφικών και λογισμικό desktop publishing. Όλες οι βασικές προσφορές λογισμικού τους έρχονται με δωρεάν "Εκδόσεις Starter" και η εφαρμογή τους για διανυσματική σχεδίαση δεν αποτελεί εξαίρεση.

Μην αφήνετε να σας ξεγελάσει το κομμάτι "Εκκίνηση". Μπορεί να μην έχει πάντα την έκδοση pro, αλλά μπορεί να κάνει τη δουλειά στις περισσότερες περιπτώσεις. Αν δεν είστε εικονογράφος από το εμπόριο, αυτή η εφαρμογή μπορεί και θα ικανοποιήσει τις ανάγκες σας ... υπό την προϋπόθεση ότι βρίσκεστε στα Windows. Δυστυχώς, δεν είναι cross-platform. Επίσης, η εγγραφή απαιτείται για τη λήψη.

Karbon

Μέρος της σουίτας γραφείου Calligra, το οποίο είναι κυρίως για το Linux, Karbon είναι ένας πλήρως εξοπλισμένος διανυσματικός επεξεργαστής γραφικών. Έχει όλα τα βασικά εργαλεία και μερικά άλλα εκτός από αυτά. Η εγκατάσταση σε Mac και Windows είναι δύσκολη προς το παρόν, αν και όχι αδύνατη.

PrintDesign

Το όνομα ακούγεται σαν ένα πακέτο λογισμικού από τη δεκαετία του '90, ξέρω, αλλά είναι πραγματικά πολύ καινούριο. Στην πραγματικότητα, είναι ο διάδοχος της παλιάς εφαρμογής απεικόνισης sK1, η οποία έχει διακοπεί. PrintDesign βρίσκεται αυτή τη στιγμή στο στάδιο "προεπισκόπησης" και έχει εκδόσεις Linux και Windows. Δεν είναι ακόμα έτοιμο για παραγωγή, αλλά είναι ένα έργο που αξίζει να παρακολουθήσετε.

Επεξεργασία SVG

Το όνομα είναι ίσως λίγο-on-the-μύτη, αλλά το λογισμικό είναι περισσότερο από ικανό. Επεξεργασία SVG Που βασίζονται αποκλειστικά σε τεχνολογίες ιστού, συγκεκριμένα HTML5, JavaScript και CSS. Αυτό σημαίνει ότι δεν υπάρχει λειτουργία διακομιστή. Επιπλέον, είναι το Open Source, που σημαίνει ότι μπορείτε να το κατεβάσετε, να το τοποθετήσετε στο δικό σας διακομιστή ή ακόμα και να το χρησιμοποιήσετε μόνο από την επιφάνεια εργασίας.

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

Janvas

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

Τα εργαλεία σχεδίασης είναι αρκετά προηγμένα και εξοικειωμένα, κάθε μεταβλητή είναι επεξεργάσιμη στην πλευρική γραμμή και μπορείτε να αποθηκεύσετε τα έγγραφά σας στο Google Drive. Μπορείτε να δημιουργήσετε πρότυπα, να συνεργαστείτε σε έγγραφα σχεδίασης και ακόμη και να συμπεριλάβετε αρχεία CSS και JS που έχουν δημιουργηθεί για να αλληλεπιδράσουν με τα γραφικά.

Συνολικά, είναι μια συμπαθητική προσφορά.

Mondrian

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

Σχεδίαση SVG

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

Βιβλιοθήκες SVG

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

Snap.svg

Θραύση είναι μια βιβλιοθήκη JS για τη δημιουργία και την αλληλεπίδραση με το SVG. Είναι σχεδιασμένο για σύγχρονα προγράμματα περιήγησης. Yup, αυτό σημαίνει ότι υποστηρίζει μόνο IE9 + ... αλλά αν τα παλαιότερα προγράμματα περιήγησης δεν είναι ανησυχούν σας, πηγαίνετε για αυτό.

Ραφαήλ

Ραφαήλ, αντίθετα με το Snap, είναι συμβατό με τα παλαιότερα προγράμματα περιήγησης. Στην πραγματικότητα, μπορεί να λειτουργήσει με IE6 +, Safari 3+ και Chrome 5+. Εάν αναπτύσσετε κάτι για ένα επιχειρηματικό σύστημα όπου οι χρήστες μπορεί να είναι σε παλαιότερες μηχανές, για παράδειγμα, ο Raphaël μπορεί να είναι το καλύτερο στοίχημά σας.

jQuery SVG

Όπως SVG και jQuery; Δεν είμαι πραγματικά έκπληκτος. Το jQuery έχει ίσως χάσει κάποια από τα ενδιαφέροντα που είχε κάποτε, αλλά είναι ακόμα μια βιβλιοθήκη για πολλούς από εμάς.

jQuery SVG, τότε, είναι πιθανώς το plugin που ψάχνετε. Έχει λειτουργίες για κινούμενα σχέδια, δημιουργώντας γραφικά και ακόμη και επεκτάσεις. Αυτό είναι σωστό, επεκτάσεις για ένα plugin. Η υποστήριξη του προγράμματος περιήγησης είναι IE9 +, αλλά οι παλαιότερες εκδόσεις του IE μπορούν να χρησιμοποιηθούν με τα κατάλληλα plugins του προγράμματος περιήγησης που έχουν εγκατασταθεί.

Δεν θα εξαρτώνα από τους χρήστες που έχουν αυτά τα plugins, όμως.

SVGMagic

SVGMagic είναι μια λύση drop-in, βασισμένη σε jQuery, για παλαιότερα προγράμματα περιήγησης (IE 7 & 8). Αντί να δημιουργείτε χειροκίνητα εφεδρικές εικόνες για κάθε αρχείο SVG που χρησιμοποιείτε, αυτό το πρόσθετο μπορεί να τις δημιουργήσει εν πτήσει. Διαχειρίζεται επίσης τις εικόνες φόντου.

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

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

Μια προειδοποίηση: αυτή τη στιγμή δεν μπορεί να χειριστεί πάρα πολλές εικόνες ταυτόχρονα. Δεν θα θέλατε να χρησιμοποιήσετε αυτήν την τεχνική σε σελίδες με περισσότερα από μερικά αρχεία SVG.

SVG.JS

Τέλος, εδώ υπάρχει μια επιλογή για τους μετρητές ψηφιολέξεων. SVG.JS ζυγίζει σε μόλις 11.8kbs όταν είναι gzipped. Παρά το μικρό του μέγεθος, υποστηρίζει έναν εντυπωσιακό αριθμό χαρακτηριστικών (όπως αναφέρονται στη σελίδα του έργου):

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

Διαβάστε το απόδειξη με έγγραφα για περισσότερες πληροφορίες.

Χρηματιστήριο SVG

Δεν είναι ο καθένας εικονογράφος. Τουλάχιστον, σίγουρα δεν ήμουν ποτέ καλός σε αυτό. Έτσι, οι εικονογραφήσεις αποθεμάτων αποτελούν ανεκτίμητο πόρο. Μπορεί όμως να είναι δύσκολο να βρεις καλά πράγματα. Αυτό που δεν μοιάζει με το clipart της Microsoft είναι συχνά περιορισμένο ή ακριβό.

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

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

SVG Clipart στο openclipart.com

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

Και πολλά από αυτά είναι clipart-ish. Και πολλά από αυτά είναι ερασιτεχνικό έργο. Υπάρχουν όμως κάποια γραφικά ποιότητας, αν κοιτάξετε. Γεια σου, είναι δωρεάν.

SVG Stock

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

Οι πόροι SVG στο deviantart.com

Αχ DeviantArt, αυτή η γιγαντιαία κοινότητα εξακολουθεί να είναι ισχυρή. Μεταβείτε στην κατηγορία εικόνων και αναζητήστε SVG (ή κάντε κλικ στον παραπάνω σύνδεσμο). Και πάλι, η ποιότητα θα ποικίλει, αλλά υπάρχουν καλά πράγματα εκεί αν έχετε το χρόνο να κοιτάξετε.

SVG Gallery Patterns

Μια μικρή γκαλερί γεμάτη Σχέδια με βάση το SVG. Έχει σχεδιαστεί ως περισσότερο από μια περίπτωση, αλλά τα αρχεία προέλευσης είναι όλα εκεί για την ευκολία σας.

SVG μοτίβα από svgeneration.com

svgeneration.com περιλαμβάνει πολλά πρότυπα SVG για τη χρήση σας. Ο ιστότοπος διαθέτει επιλογές επεξεργασίας για κάθε μοτίβο και μπορείτε να επεξεργαστείτε τον κώδικα απευθείας στον ιστότοπο για να δείτε τις αλλαγές στις ενέργειές σας. Δεν είναι μόνο αυτή η μεγάλη πηγή για τα προκατασκευασμένα μοτίβα, αλλά μπορείτε να μάθετε πολλά για το πώς γίνονται στην πρώτη θέση.

SVG Clipart

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

SVG Studio

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

SVG στις μεγαλύτερες τοποθεσίες αποθεμάτων

Δεν μπορώ να πω πολλά για την τέχνη που προσφέρεται σε κάθε τοποθεσία, επειδή ποικίλλει ευρέως από τον συνεισφέροντα χωρίς γενικό στυλ. Τα μεγαλύτερα ονόματα είναι istockphoto.com,shutterstock.com,bigstockphoto.com, και canstockphoto.com.

SVG Έμπνευση

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

Αυτό είναι συχνά πιο εύκολο να πούμε απ 'ό, τι έγινε. Συχνά βοηθά να έχουμε ένα σημείο αναφοράς, κάτι εκπληκτικό να κοιτάξουμε, και να μας δείξει τι ακριβώς τρομερά πράγματα μπορούμε να κάνουμε με αυτό που έχουμε. Αυτό είναι που μοιάζουν με ιστότοπους Webcreme έκανε για web design εν γένει. Αυτό είναι ό, τι CSS Zen Garden, και όλες οι γκαλερί CSS που ήρθαν μετά από αυτό, έκαναν για layouts CSS.

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

Απεικόνιση διαφημίσεων προβολής

Αυτό το παράδειγμα είναι μέρος του Snap.svg συλλογή στο CodePen. Χρειάζεστε ένα τέλειο παράδειγμα για το πώς θα μπορούσε να χρησιμοποιηθεί το SVG για την επανάσταση στις online διαφημίσεις; Αυτό είναι.

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

Δείτε το στυλό Απεικόνιση διαφημίσεων προβολής από τον CJ Gammon ( @cjgammon ) επί CodePen .

Επιφάνεια εργασίας Jtop επιφάνεια εργασίας

Το Mozilla Developer Network, μια οντότητα που συνεχίζω να ασχολούμαι με τις ερευνητικές τεχνολογίες ιστού γενικά, έχει επίσης δημιουργήσει κάποια ενδιαφέροντα πράγματα που έγιναν με το SVG. Για παράδειγμα, πήγαν και έκαναν μια ολόκληρη επιφάνεια εργασίας επιφάνειας εργασίας με βάση αποκλειστικά τεχνολογίες ιστού όπως HTML5, JS, SVG και CSS. Είναι γρήγορο, προσαρμόσιμο και σχεδόν επιθυμώ να είναι μέρος ενός πραγματικού λειτουργικού συστήματος.

Ένας χρόνος προβληματισμού

Μας έφερε ShinyDemos (που με τη σειρά του μας έφερε ο λαός στο ΛΥΡΙΚΗ ΣΚΗΝΗ ), Ένας χρόνος προβληματισμού θα κυριολεκτικά επικαλύψει ακριβώς ένα ρολόι πάνω από μια ζωντανή τροφή από την κάμερα σας. Λοιπόν, αν σας δώσει την άδειά σας, και έχετε στην πραγματικότητα μια φωτογραφική μηχανή, ούτως ή άλλως. Αλλά το θέμα είναι ότι δείχνει πώς οι μάσκες SVG μπορούν να επικαλυφθούν σχεδόν σε οτιδήποτε.

oblurlay

Μέσω ενός συνδυασμού CSS, SVG και jQuery, oblurlay δημιουργεί ακριβώς αυτό που προτείνει το όνομά του: μια θολή επικάλυψη, στυλ iOS. Είναι ένα plugin jQuery, οπότε η υλοποίηση δεν είναι δύσκολη, και δείχνει με προσοχή πώς τα φίλτρα SVG μπορούν να εφαρμοστούν σε όλα τα είδη των πραγμάτων, όχι μόνο τα ίδια τα αντικείμενα SVG.

Demos Codrops

Τα codrops (που αναφέρθηκαν προηγουμένως στο τμήμα tutorials) έδωσαν αρκετά συναρπαστικά, εντυπωσιακά και απλά αρκετά ωραία demos για να δείξουν τι μπορεί να κάνει η SVG. Ο καθένας αξίζει το δικό του σωστό τμήμα σε αυτό το άρθρο, αλλά υπάρχουν τόσα πολλά που τα βάζω όλα σε ένα. Εάν δεν εξετάζετε τίποτα άλλο από αυτήν την ενότητα "Εμπνευσμένος", εξετάστε τα. Ελέγξτε τις επιδείξεις και κάντε λήψη των αρχείων προέλευσης. Στη συνέχεια, ευχαριστήστε τους τύπους στο Codrops. Το αξίζουν.

Σημείωση: Όλοι δεν είναι επικεντρωμένοι στο SVG, αλλά χρησιμοποιούν όλα τα γραφικά SVG με κάποιο τρόπο.

Εφέ φόρτωσης σελίδας : ένα σύνολο δημιουργικών εφέ φόρτωσης σελίδας

• ← 10 δωρεάν WordPress Plugins για τον Φεβρουάριο του 2015
• 21 εργαλεία συνεργασίας για να εξομαλύνετε την ομαδική εργασία σας →