Μετατρέψτε το εικονίδιο SVG σε κώδικα για χρήση σε CSS. Μετατροπή εικόνων από ράστερ σε διάνυσμα Κατεβάστε το convector από jpeg σε svg
Σε ένα από τα έργα, μικρά εικονίδια σε μορφή svg εμφανίστηκαν κοντά στο μενού και είναι απαραίτητο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο μενού, το κείμενο και το εικονίδιο να αλλάζουν χρώμα. Για να μην τεκνοποιήσει ένας μεγάλος αριθμός απόεικόνες, αποφασίστηκε να μεταφραστεί το svg σε κώδικα και να χρησιμοποιηθεί σε στυλ CSS.
Ένας γρήγορος οδηγός για το πώς να χρησιμοποιήσετε το SVG σε CSS
χρησιμοποιούμε τον κώδικα που προκύπτει στο αρχείο μας css.
Για παράδειγμα, ας πάρουμε το εικονίδιο του Facebook (ένα τυπικό εικονίδιο με μια μικρή αλλαγή).
Στον ιστότοπο https://jakearchibald.github.io/svgomg/ κάντε κλικ "Open SVG"ή απλώς σύρετε το εικονίδιο στη θύρα προβολής. Στην επάνω αριστερή γωνία, κάντε κλικ "ΚΩΔΙΚΑΣ", επιλέξτε τον κωδικό και, στη συνέχεια, κάντε κλικ στο εικονίδιο αντιγραφής, οπότε παίρνουμε τον κώδικα της εικόνας svg στο buffer.
Κάτι σαν αυτό:
Στη συνέχεια επικολλάμε τον κώδικα που προκύπτει στο παραπάνω παράθυρο, κάνουμε κλικ στο Converte και λαμβάνουμε το τελικό εικόνα φόντου:
Εικόνα φόντου: url ("δεδομένα: εικόνα / svg + xml; σύνολο χαρακτήρων = UTF-8,% 3csvg xmlns ="http://www.w3.org/2000/svg "width =" 20 "height =" 20 " viewBox = "0 0 20 20"% 3e% 3cpath fill-rule = "evenodd" clip-rule = "evenodd" fill = "% 23FFF" d = "M12.748 16v-1h6v1h-6zm0-3h6v1h-6v 1zm4 5h -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.405-400000. .45h -3v3h3v8h3v-8h4z "/% 3e% 3c / svg% 3e");
Αντιγράψτε και χρησιμοποιήστε το στο css σας.
Για να αλλάξετε το χρώμα, αλλάξτε γέμισμα = "% 23FFF", αλλά έχετε κατά νου ότι το% 23 είναι ένα κανονικό σύμβολο #, δηλαδή, γέμισμα = "% 23000" είναι ένα κανονικό μαύρο (# 000).
Η εικόνα SVG είναι μια σημαντική διανυσματική μορφή για την επόμενη γενιά ιστοτόπων και είναι πλήρως ενσωματωμένη στα νέα πρότυπα HTML5. Με το Aurora SVG Viewer & Converter: Μπορείτε εύκολα να προβάλετε γραφικά SVG και να μετατρέψετε τις παραγωγές σας σε πολλές μορφές.
Η έλευση της HTML5 έφερε μεγαλύτερη χρήση διανυσματικών εικόνων με μορφοποίηση SVG. Εάν είστε προγραμματιστής ιστού, τώρα είναι η τέλεια στιγμή για να προχωρήσετε το παιχνίδικαι εξοπλίστε τη ροή εργασίας σας με όλα όσα χρειάζεστε για να εργαστείτε με εικόνες HTML5 και SVG. Το πρώτο βήμα είναι να πάρετε ένα αντίγραφο της σημερινής προσφοράς λογισμικού με έκπτωση, διαθέσιμη για χρήστες Mac και Windows!
Aurora SVG Viewer & Converterδιευκολύνει την οργάνωση, την προβολή και τη μετατροπή εικόνων SVG. Με Aurora SVG Viewer & Converter, θα απολαύσετε μια βολική λειτουργία εμφάνισης μικρογραφιών και μια άμεσα αναγνωρίσιμη προβολή φακέλου. Εάν πρέπει να μετατρέψετε μια εικόνα SVG σε διαφορετική μορφή, Aurora SVG Viewer & Converterσώζει την ημέρα επιτρέποντάς σας να αποθηκεύετε εικόνες ως αρχεία μορφής TIFF, PNG, JPB, BMP, GIF, TGA, XPM, PPM, XBM ή ακόμα και σε μορφή PDF. Ακόμα καλύτερα, μπορείτε να μετατρέψετε πολλά αρχεία ομαδικά!
Φυσικά, έχετε πάντα τον πλήρη έλεγχο των λεπτομερειών με Aurora SVG Viewer & Converter... Προσαρμόστε την ανάλυση εξόδου, μετατρέψτε τμήματα εικόνων SVG και ορίστε την ποιότητα μετατροπής!
Στιγμιότυπο οθόνης των Windows: Στιγμιότυπο οθόνης Mac:
Χαρακτηριστικά Aurora SVG Viewer & Converter:
1. Υποστήριξη Windows & MAC OS.
2. Εύκολο επιλογή φακέλουκαι εμφάνιση μικρογραφιώντρόπος.
3. Γρήγορη προεπισκόπηση εικόνων SVG ή μετατροπή τους. υποστηρίζει SVG και SVGZ.
4. Ο μετατροπέας SVG σε πολλαπλές μορφές εικόνας περιλαμβάνει: tiff, png, jpg, bmp, gif, tga, xpm, ppm, xbm και pdf.
5. Μετατροπή παρτίδας, δημιουργήστε μια λίστα εικόνων για μετατροπή και, στη συνέχεια, με μια σάρωση μετατρέψτε τις και αποθηκεύστε τις σε άλλο φάκελο.
6. Η ανάλυση εξόδου ρυθμίζεται εύκολα με την ανάλυση ελεύθερου ζουμ. Επιλέξτε και μετατρέψτε οποιαδήποτε περιοχή του καμβά SVG.
7. Προσαρμοσμένη μετατροπή οποιασδήποτε περιοχής επιλέξετε: επιλέξτε μια περιοχή της εικόνας SVG και μετατρέψτε.
Μερικές φορές καθίσταται απαραίτητο να αποθηκεύσετε το svg σε png μέσω ενός προγράμματος περιήγησης. Δυστυχώς, το πρόγραμμα περιήγησης δεν διαθέτει ένα μαγικό api που θα σας επέτρεπε να το κάνετε αυτό χωρίς διάφορα hack. Τι να κάνετε αν εξακολουθείτε να θέλετε να πετύχετε αυτό που θέλετε;
Η πρώτη ιδέα που μου ήρθε στο μυαλό είναι να το κάνω μέσω καμβά, ο οποίος έχει μια μέθοδο toDataURL ("εικόνα / png").
Έτσι, έγραψα ένα απλό σενάριο: jsfiddle, github:
Var html = document.querySelector ("svg"). ParentNode.innerHTML; var imgsrc = "δεδομένα: εικόνα / svg + xml; base64," + btoa (html); var canvas = document.querySelector ("καμβάς"), context = canvas.getContext ("2d"); canvas.setAttribute ("width", 526); canvas.setAttribute ("ύψος", 233); var image = νέα εικόνα; image.src = imgsrc; image.onload = συνάρτηση () (context.drawImage (εικόνα, 0, 0); var canvasdata = canvas.toDataURL ("image / png"); var a = document.createElement ("a"); a.textContent = " save "; a.download =" export_ "+ Date.now () +" .png "; a.href = canvasdata; document.body.appendChild (a); canvas.parentNode.removeChild (καμβάς);
Η ουσία του σεναρίου είναι απλή: μετέτρεψα το svg σε dataUri, το φόρτωσα μέσω εικόνας, σχεδίασα την εικόνα στον καμβά και το μετέτρεψα σε png. Φάνηκε ότι ο στόχος επιτεύχθηκε και μπορείτε να χαλαρώσετε. Αυτή η προσέγγιση λειτούργησε σε Firefox και Chrome, αλλά όταν την άνοιξα στο αγαπημένο μας πρόγραμμα περιήγησης IE, έλαβα ένα υπέροχο σφάλμα:
Το θέμα είναι ότι ο IE πιστεύει ότι η εικόνα έγινε λήψη από άλλο κεντρικό υπολογιστή. Δυστυχώς, η ρύθμιση προέλευσης για το dataUri δεν θα λειτουργήσει. Στην πραγματικότητα, η περιγραφή των κανόνων βρίσκεται εδώ: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements. Ήταν δυνατό, φυσικά, να γίνει proxy svg μέσω του διακομιστή και τότε όλα θα λειτουργούσαν, αλλά ήθελα μια καθαρά λύση πελάτη.
Και μετά θυμήθηκα την υπέροχη βιβλιοθήκη canvg. Χρησιμοποιώντας αυτήν τη βιβλιοθήκη, σχεδιάζω svg σε καμβά και μετά συνεχίζω όπως στην πρώτη επιλογή: Παίρνω toDataURL ("εικόνα / png"). Το αποτέλεσμα είναι ένας τόσο απλός κώδικας: github:
Var svg = document.querySelector ("svg"); var canvas = document.createElement ("καμβάς"); canvas.height = svg.getAttribute ("ύψος"); canvas.width = svg.getAttribute ("πλάτος"); canvg (καμβάς, svg.parentNode.innerHTML.trim ()); var dataURL = canvas.toDataURL ("εικόνα / png"); var data = atob (dataURL.substring ("data: image / png; base64," μήκος)), asArray = new Uint8Array (data.length); για (var i = 0, len = data.length; i< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");
Αξίζει να αναφέρω εδώ ότι χρησιμοποίησα επίσης τη βιβλιοθήκη FileSaver για να καλέσω το παράθυρο διαλόγου αποθήκευσης.
Αυτό είναι όλο, έχουμε πετύχει το επιθυμητό αποτέλεσμα.
Αξίζει να σημειωθεί μια απόχρωση - αναρωτήθηκα για την αποθήκευση του svg σε png όταν έγραφα ένα πρόσθετο για την εξαγωγή tauCharts. Δεδομένου ότι τα στυλ στο svg ορίζονται από ένα εξωτερικό αρχείο, για να επιτύχω όσο το δυνατόν μεγαλύτερη ομοιότητα με το αρχικό svg, εισάγω το ενσωματωμένο στυλ στο svg. Και έχουμε το εξής αποτέλεσμα.
Ελπίζω αυτό το άρθρο να σας φανεί χρήσιμο και να εξοικονομήσετε χρόνο.
JpgΕίναι μια από τις πιο δημοφιλείς μορφές εικόνας που χρησιμοποιούνται σήμερα. Το κύριο πλεονέκτημά του είναι η δυνατότητα αποθήκευσης εικόνων καλής ποιότηταςσε μικρά αρχεία. Αυτό είναι δυνατό λόγω του τύπου συμπίεσης που χρησιμοποιείται. Ο μηχανισμός αυτού του τύπου συμπίεσης δίνει προτεραιότητα σε ορισμένα μέρη της εικόνας έναντι άλλων, διατηρώντας τις περιοχές υψηλής ποιότητας της εικόνας πιο ορατές στο ανθρώπινο μάτι.
SVGΕίναι μια ανοιχτή τυπική διανυσματική μορφή που χρησιμοποιεί τη γλώσσα Σήμανση XMLκαι μπορεί να περιέχει κινούμενα ή διαδραστικά γραφικά. Το SVG δημιουργήθηκε από τον Παγκόσμιο Ιστό, έναν οργανισμό που προωθεί την ανάπτυξη και τη διαλειτουργικότητα των προϊόντων Ιστού και προσφέρει αυτά τα προϊόντα ελεύθερα. Τα αρχεία SVG υποστηρίζονται από τα περισσότερα προγράμματα περιήγησης ιστού και μπορούν να δημιουργηθούν με προγράμματα ζωγραφικής ή προγράμματα επεξεργασίας κειμένου.
Πώς να μετατρέψετε JPG σε SVG;
Ο ευκολότερος τρόπος είναι να κατεβάσετε καλό πρόγραμμαμετατροπή, για παράδειγμα Photo Converter. Λειτουργεί γρήγορα και αποτελεσματικά, επιτρέποντάς σας να μετατρέψετε οποιονδήποτε αριθμό αρχείων JPG ταυτόχρονα. Θα είστε σε θέση να εκτιμήσετε γρήγορα ότι το Photo Converter μπορεί να σας εξοικονομήσει πολύ χρόνο που θα ξοδέψετε όταν εργάζεστε χειροκίνητα.
Κατεβάστε και εγκαταστήστε το Photo Converter
Το Photo Converter είναι εύκολο στη λήψη, εγκατάσταση και χρήση - δεν χρειάζεται να είστε επιστήμονας υπολογιστών για να κατανοήσετε πώς λειτουργεί.
Προσθέστε αρχεία JPG στο Photo Converter
Εκκινήστε το Photo Converter και ανεβάστε τα αρχεία .jpg που θέλετε να μετατρέψετε σε.svg
Μπορείτε να επιλέξετε αρχεία JPG μέσω του μενού Αρχεία -> Προσθήκη αρχείωνή απλώς αποθέστε τα στο παράθυρο του Photo Converter.
Επιλέξτε μια τοποθεσία για να αποθηκεύσετε τα αρχεία SVG που προκύπτουν
Επιλέξτε SVG ως μορφή αποθήκευσης
Για να επιλέξετε το SVG ως μορφή αποθήκευσης, κάντε κλικ στο εικονίδιο SVGστο κάτω μέρος της οθόνης ή στο κουμπί + για να προσθέσετε δυνατότητα εγγραφής σε αυτήν τη μορφή.
Τώρα απλά πατήστε το κουμπί Αρχήκαι η μετατροπή θα ξεκινήσει αμέσως και τα αρχεία SVG θα αποθηκευτούν στην καθορισμένη θέση με τις επιθυμητές παραμέτρους και εφέ.
Δοκιμάστε τη δωρεάν έκδοση επίδειξηςΟδηγίες βίντεο
Ο ευκολότερος τρόπος για να εντοπίσετε ένα γραφικό είναι να ανοίξετε ή να τοποθετήσετε το αρχείο στο Adobe Illustrator και να το ανιχνεύσετε αυτόματα χρησιμοποιώντας την εντολή Image Trace: Βοήθεια Illustrator. Χρήση του Εργαλείου Trace Image - CS6
* Ακόμα πιο εύκολο):
Με λογισμικό, η εικόνα / εικόνα / σχέδιο / φωτογραφία που παρέχεται από εσάς - σε διάνυσμα για 1 (!) Ευρώ ->Εικόνα σε διάνυσμα
=== Διαδικτυακές υπηρεσίες ===
- Η πρώτη είναι επί πληρωμή, αν και δύο εικόνες έναρξης μπορούν να δημιουργηθούν δωρεάν.
Στα αγγλικά, αν και είναι εύκολο να το καταλάβεις. Δύο επιλογές για χρήση - online ή αγορά προγράμματος για υπολογιστή. Η τιμή για on-line χρήση (απεριόριστη) είναι 7,95 $, το πρόγραμμα για την επιφάνεια εργασίας είναι 295,00 $. Είναι δυνατή η παραγγελία χειροκίνητης ανίχνευσης.
Φυσικά, στις πύλες ανεξάρτητων επαγγελματιών μπορείτε να το βρείτε φθηνότερα, λοιπόν, υπάρχει επιλογή για όλους.
Ακρίβεια
Παραπάνω είναι μερικές εικόνες σύγκρισης των Vector Magic, Adobe Live Trace (CS6) και Corel
Corel PowerTRACE (X6). Προσοχή στην ακρίβεια της επεξεργασίας των εντύπων από το Διάνυσμα.
Ευκολία στη χρήση
Δεν χρειάζεται να εγκαταστήσετε και να γνωρίζετε μεγάλη ποικιλία επιλογών και ρυθμίσεων για να επιτύχετε ένα αποδεκτό αποτέλεσμα.
Απλά πρέπει να απαντήσετε σε μερικές απλές ερωτήσεις και αυτό είναι όλο. Εάν το αποτέλεσμα δεν είναι ικανοποιητικό, τότε υπάρχει ένας οδηγός «για βλάβες», όπου μπορείτε εύκολα να βρείτε την απάντηση και να λύσετε το πρόβλημα.
Μπορείτε να προσπαθήσετε ξανά και ξανά μέχρι να έχετε ένα ικανοποιητικό αποτέλεσμα.
Γενικά, μπορείτε να αλλάξετε αυτήν την εργασία στο Vector και να κάνετε πιο δημιουργικές εργασίες.
Η μετάφραση είναι δωρεάν, αλλά το νόημα είναι κάπως έτσι.
Προέλευση εικόνων σε μορφή JPG, GIF, PNG, BMP και TIFF. Το αποτέλεσμα είναι σε τρεις επιλογές ποιότητας και σε τρεις μορφές: EPS, SVG και PNG. Μόλις ολοκληρωθεί, είναι δυνατή η επανάληψη με διαφορετική επιθυμητή ποιότητα και κάποια επεξεργασία.
- Στη συνέχεια, εντελώς ΕΛΕΥΘΕΡΟΣ .
Εντελώς στα αγγλικά, αλλά η χρήση είναι ξεκάθαρη. Λίγη περισσότερη προσαρμογή και χειρωνακτική εργασία, αλλά αξίζει τον κόπο.
Υποστηριζόμενες μορφές πηγής:
| Μορφές εξόδου:
|
- σας επιτρέπει να μετατρέψετε εικόνες σε. Μπορείτε είτε να ανεβάσετε ένα αρχείο είτε να δώσετε έναν σύνδεσμο προς μια εικόνα. Είναι επίσης δυνατή η επικάλυψη ψηφιακών εφέ.
Κατά τη μετατροπή εικόνων ράστερ (PNG ή JPG) σε μορφή SVG, τα σχήματα και τα αντικείμενα θα μετατραπούν σε ασπρόμαυρα διανυσματικά γραφικά, τα οποία κλιμακώνονται χωρίς απώλεια ποιότητας. Τέτοιες εικόνες μπορούν να χρωματιστούν χρησιμοποιώντας ελεύθερο λογισμικόσχετικά με την εργασία με διανυσματικές εικόνες (και άλλες). Οι φωτογράφοι στις περισσότερες περιπτώσεις δεν θα επιτύχουν το επιθυμητό αποτέλεσμα κατά τη μετατροπή bitmapσε μορφή SVG.
Εάν κάνετε μετατροπή σε μορφή SVG οποιαδήποτε διανυσματική εικόνα(για παράδειγμα, μορφή eps ή ai), ο μετατροπέας θα προσπαθήσει να διατηρήσει όλα τα διανυσματικά και τα δεδομένα χρώματος και επίσης να διασφαλίσει ότι τα δύο αρχεία είναι όσο το δυνατόν παρόμοια.
Ο μετατροπέας μορφής Scalable Vector Graphics (SVG) σάς επιτρέπει να μετατρέπετε αρχεία σε περισσότερες από 130 μορφές. Οδηγίες μετατροπής:
3FR σε SVG, AFF σε SVG, AI σε SVG, ANI σε SVG, ART σε SVG, ARW σε SVG, AVI σε SVG, AVS σε SVG, BMP σε SVG, CDR σε SVG, CGM σε SVG, CIN σε SVG, CMYK σε SVG, CMYKA σε SVG, CR2 σε SVG, CRW σε SVG, CUR σε SVG, CUT σε SVG, DCM σε SVG, DCR σε SVG, DCX σε SVG, DDS σε SVG, DFONT σε SVG, DIA σε SVG, DNG σε SVG, DPX σε SVG, DXF σε SVG, EPDF σε SVG, EPI σε SVG, EPS σε SVG, EPSF σε SVG, EPSI σε SVG, EPT σε SVG, EPT2 σε SVG, EPT3 σε SVG, ERF σε SVG, EXR σε SVG, FAX σε SVG, FIG σε SVG, FITS σε SVG, FPX σε SVG, FRACTAL σε SVG, FTS σε SVG, G3 σε SVG, GIF σε SVG, GIF87 σε SVG, GREY σε SVG, GRB σε SVG, HDR σε SVG, HRZ σε SVG, ICB σε SVG, ICO σε SVG, ICON σε SVG, IPL σε SVG, JBG σε SVG, JBIG σε SVG, JNG σε SVG, JP2 σε SVG, JPC σε SVG, JPE σε SVG, JPEG σε SVG, JPG σε SVG, JPX σε SVG, K25 σε SVG, KDC σε SVG, M2V σε SVG, M4V σε SVG, MAT σε SVG, MIFF σε SVG, MNG σε SVG, MONO σε SVG, MOV σε SVG, MP4 σε SVG, MPC σε SVG, MPEG σε SVG, MPG σε SVG, MR W σε SVG, MSL σε SVG, MSVG σε SVG, MTV σε SVG, MVG σε SVG, NEF σε SVG, NRW σε SVG, ORF σε SVG, OTB σε SVG, OTF σε SVG, PAL σε SVG, PALM σε SVG, PAM σε SVG, PBM σε SVG, PCD σε SVG, PCDS σε SVG, PCL σε SVG, PCT σε SVG, PCX σε SVG, PDB σε SVG, PDF σε SVG, PDFA σε SVG, PEF σε SVG, PES σε SVG, PFA σε SVG, PFB σε SVG, PFM σε SVG, PGM σε SVG, PICON σε SVG, PICT σε SVG, PIX σε SVG, PJPEG σε SVG, PLASMA σε SVG, PNG σε SVG, PNG24 σε SVG, PNG32 σε SVG, PNGNM σε SVG, PNG8 σε SVG SVG, PPM σε SVG, PS σε SVG, PSD σε SVG, PTIF σε SVG, PWP σε SVG, RAF σε SVG, RAS σε SVG, RGB σε SVG, RGBA σε SVG, RLA σε SVG, RLE σε SVG, SCT σε SVG, SFW σε SVG, SGI σε SVG, SK σε SVG, SK1 σε SVG, SR2 σε SVG, SRF σε SVG, SUN σε SVG, SVG σε SVG, SVGZ σε SVG, TGA σε SVG, TIF σε SVG, TIFF σε SVG, TIM σε SVG, TTC σε SVG, TTF σε SVG, TXT σε SVG, VDA σε SVG, VICAR σε SVG, VID σε SVG, VIFF σε SVG, VST σε SVG, WBMP σε SVG, WEBP σε SVG, WMF σε SVG, WMZ σε SVG, WPG σε SVG , X σε SVG, X3F σε SVG, XAML σε SVG, XBM σε SVG, XC σε SVG, XCF σε SVG, XFIG σε SVG, XPM σε SVG, XV σε SVG, XWD σε SVG, YCBCR σε SVG, YCBCRA σε SVG, YCU σε SVG
Βασισμένο σε λύσεις ανοιχτού κώδικα όπως Autotrace, ImageMagick και διάφορα στοιχεία γραφικών linux.
Μορφές μετατροπής:
SVG - Κλιμακόμενα αρχεία διανυσματικών γραφικών
AI - Αρχεία Adobe Illustrator (με βάση υστερόγραφο)
Αρχεία CGM - Computer Graphics Metafile
WMF - Windows Metafile αρχεία
SK - Αρχεία Sketch / Skencil
PDF - Μορφή φορητού εγγράφου
EPS - PostScript
PLT - HPGL για κοπή αρχείων plotter
επίσης: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D