Ο πιο απλός τρόπος Art Tracing - Ανοίξτε ή τοποθετήστε ένα αρχείο στο Adobe Illustrator και ανιχνεύστε αυτόματα χρησιμοποιώντας την εντολή Image Trace: Βοήθεια Illustrator. Χρήση του Εργαλείου Trace Image - CS6

*Ακόμα πιο εύκολο):
Με μέσα λογισμικού, η εικόνα/εικόνα/σχέδιο/φωτογραφία που παρέχεται από εσάς - σε διάνυσμα για 1 (!) Ευρώ ->Εικόνα σε διάνυσμα

=== Διαδικτυακές υπηρεσίες ===

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

Στα αγγλικά, αν και είναι εύκολα κατανοητό. Δύο επιλογές για χρήση - online ή αγορά προγράμματος για υπολογιστή. Η τιμή για online χρήση (απεριόριστη) είναι 7,95 $, το πρόγραμμα επιτραπέζιου υπολογιστή κοστίζει 295,00 $. Είναι δυνατή η παραγγελία χειροκίνητου εντοπισμού.
Φυσικά, μπορείτε να το βρείτε φθηνότερα σε πύλες ελεύθερων επαγγελματιών, λοιπόν, η επιλογή εξαρτάται από όλους.

Ακρίβεια

Παραπάνω είναι μερικές συγκριτικές εικόνες των Vector Magic, Adobe Live Trace (CS6) και Corel
Corel PowerTRACE (X6). Δώστε προσοχή στην ακρίβεια χειρισμού του διανύσματος σχήματος.

Ευκολία στη χρήση

Δεν χρειάζεται να εγκαταστήσετε και να γνωρίζετε πολλές επιλογές και ρυθμίσεις για να επιτύχετε ένα αποδεκτό αποτέλεσμα.

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

Μπορείτε να προσπαθήσετε ξανά και ξανά μέχρι να έχετε ένα ικανοποιητικό αποτέλεσμα.

Γενικά, μπορείτε να μετατοπίσετε αυτήν την εργασία στο Vector και να κάνετε πιο δημιουργικές εργασίες.

Η μετάφραση είναι δωρεάν, αλλά το νόημα είναι κάπως έτσι.

Πηγή εικόνων σε Μορφή JPG, GIF , PNG , BMP και TIFF . Το αποτέλεσμα είναι σε τρεις επιλογές ποιότητας και σε τρεις μορφές: EPS, SVG και PNG. Με την ολοκλήρωση, είναι δυνατή η επανάληψη με διαφορετική επιθυμητή ποιότητα και κάποια επεξεργασία.

  • Στη συνέχεια, πλήρης ΕΛΕΥΘΕΡΟΣ .

Εντελώς στα αγγλικά, αλλά με τη χρήση όλων είναι ξεκάθαρα. Λίγη περισσότερη προσαρμογή και χειρωνακτική εργασία, αλλά αξίζει τον κόπο.


Υποστηριζόμενες μορφές πηγής:
  • png δικτύου
  • Εικόνα TGA Truevision Targa
  • Μορφή φορητού bitmap PBM
  • PNM φορητή μορφή οποιουδήποτε χάρτη
  • PGM Φορητή μορφή graymap
  • PPM Φορητή μορφή pixmap
  • BMP Microsoft Windowsεικόνα bitmap

Μορφές εξόδου:
  • svg Κλιμακόμενα διανυσματικά γραφικά
  • eps Encapsulated PostScript
  • ai Adobe Illustrator
  • dxf Μορφή DXF (χωρίς splines)
  • p2e pstoedit μορφή frontend
  • sk Σκίτσο
  • εικ XFIG 3.2
  • emf Βελτιωμένη μορφή μετα-αρχείου
  • mif Frame Maker Μορφή MIF
  • er αρχείο Elastic Reality Shape
  • epd Μορφή EPD
  • Μορφή pdf PDF
  • cgm Μετα-αρχείο γραφικών υπολογιστών
  • dr2d IFF DR2D; μορφή
  • σας επιτρέπει να μετατρέψετε εικόνες σε . Μπορείτε είτε να ανεβάσετε ένα αρχείο είτε να δώσετε έναν σύνδεσμο προς μια εικόνα. Είναι επίσης δυνατή η επικάλυψη ψηφιακών εφέ.

Στην περίπτωση μετατροπής εικόνων bitmap (PNG ή JPG) σε μορφή SVG, τα σχήματα και τα αντικείμενα θα μετατραπούν σε ασπρόμαυρα διανυσματικά γραφικά, το οποίο κλιμακώνεται χωρίς καμία απώλεια ποιότητας. Τέτοιες εικόνες μπορούν να χρωματιστούν χρησιμοποιώντας δωρεάν προγράμματαγια εργασία με διανυσματικές εικόνες (κ.λπ.). Οι φωτογράφοι στις περισσότερες περιπτώσεις δεν θα επιτύχουν το επιθυμητό αποτέλεσμα κατά τη μετατροπή ενός bitmap σε μορφή SVG.

Εάν κάνετε μετατροπή σε μορφή SVG οποιαδήποτε διανυσματική εικόνα(για παράδειγμα, μορφή eps ή ai), ο μετατροπέας θα προσπαθήσει να διατηρήσει όλα τα διανυσματικά και τα δεδομένα χρώματος και επίσης να διασφαλίσει ότι τα δύο αρχεία είναι όσο το δυνατόν παρόμοια.

Ο Scalable Vector Graphics (SVG) Format Converter σάς επιτρέπει να μετατρέψετε περισσότερες από 130 μορφές αρχείων. Οδηγίες μετατροπής:

3FR σε SVG , AFF σε SVG , AI σε SVG , ANI σε SVG , ART σε SVG , ARW σε SVG , AVI σε SVG , AVS σε SVG , BMP σε SVG , CDR σε SVG , CGM σε SVG , CINY σε SVG SVG , CMYKA σε SVG , CR2 σε SVG , CRW σε SVG , CUR σε SVG , CUT σε SVG , DCM σε SVG , DCR σε SVG , DCX σε SVG , DDS σε SVG , DFONT σε SVG , DIA, σε SV DPX σε SVG , DXF σε SVG , EPDF σε SVG , EPI σε SVG , EPS σε SVG , EPSF σε SVG , EPSI σε SVG , EPT σε SVG , EPT2 σε SVG , EPT3 σε SVG , ERF σε SVG σε SVG , SVG , FIG σε SVG , FITS σε SVG , FPX σε SVG , FRACTAL σε SVG , FTS σε SVG , G3 σε SVG , GIF σε SVG , GIF87 σε SVG , ΓΚΡΙ σε SVG , GRB σε SVG , HDR σε SVG σε 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 σε SVG , K25 σε SVG , KDC σε SVG , M2V σε SVG , M4V σε SVG , MAT σε SVG , MIFF σε SVG , MNG σε SVG , MONO σε SVG , MOV σε SVG , MP4 σε SVG , MPC σε SV MPG σε SVG W σε SVG, MSL σε SVG, MSVG σε SVG, MTV σε SVG, MVG σε SVG, NEF σε SVG, NRW σε SVG, ORF σε SVG, OTB σε SVG, OTF σε SVG, PAL σε SVG σε SVG σε PALM, SVG , PBM σε SVG , PCD σε SVG , PCDS σε SVG , PCL σε SVG , PCT σε SVG , PCX σε SVG , PDB σε SVG , PDF σε SVG , PDFA σε SVG , PEF σε SVG , PES σε SVG , PFA PFB σε SVG, PFM σε SVG, PGM σε SVG, PICON σε SVG, PICT σε SVG, PIX σε SVG, PJPEG σε SVG, PLASMA σε SVG, PNG σε SVG, PNG24 σε SVG, PNG32 σε SVG SVG , PPM σε SVG , PS σε SVG , PSD σε SVG , PTIF σε SVG , PWP σε SVG , RAF σε SVG , RAS σε SVG , RGB σε SVG , RGBA σε SVG , RLA σε SVG , RLE σε SVG , SFW σε SVG, SGI σε SVG, SK σε SVG, SK1 σε SVG, SR2 σε SVG, SRF σε SVG, SUN σε SVG, SVG σε SVG, SVGZ σε SVG, TGA σε SVG, TIF σε SVG σε SVG, TIF σε SVG σε SVG, SVG , TTC σε SVG , TTF σε SVG , TXT σε SVG , VDA σε SVG , VICAR σε SVG , VID σε SVG , VIFF σε SVG , VST σε SVG , WBMP σε SVG , WEBP σε SVG , WMF σε SVG , WMF σε SVG WPG σε SVG , X σε SVG , X3F σε SVG , XAML σε SVG , XBM σε SVG , XC σε SVG , XCF σε SVG , XFIG σε SVG , XPM σε SVG , XV σε SVG , XWD σε SVG , YCBCR σε SVGV σε, YCBCR σε SVRAG σε, σε 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

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

Ένας σύντομος οδηγός για το πώς να χρησιμοποιήσετε το SVG σε CSS

Χρησιμοποιούμε τον κώδικα που προκύπτει στο αρχείο μας css.

Για παράδειγμα, πάρτε το εικονίδιο Facebook ( τυπικό εικονίδιομε μια μικρή αλλαγή).

Στον ιστότοπο https://jakearchibald.github.io/svgomg/ κάντε κλικ Ανοίξτε το SVGή απλώς σύρετε το εικονίδιο στη θύρα προβολής. Στα αριστερά πάνω γωνίαΚάντε κλικ ΚΩΔΙΚΑΣ, επισημάνετε τον κώδικα και, στη συνέχεια, κάντε κλικ στο εικονίδιο αντιγραφής, οπότε παίρνουμε τον κώδικα της εικόνας svg μας στο buffer.

Κάτι σαν αυτό:

Στη συνέχεια, επικολλήστε τον κώδικα που προκύπτει στο παραπάνω παράθυρο, κάντε κλικ στο Converte και λάβετε το τελικό εικόνα φόντου:

Background-image: url("data:image/svg+xml;charset=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.45 0.017.25h-4.005. 3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");

Αντιγράψτε και χρησιμοποιήστε το στο css σας.

Για να αλλάξουμε το χρώμα, αλλάζουμε fill="%23FFF" , αλλά λάβετε υπόψη ότι το %23 είναι ένα κανονικό σύμβολο #, δηλαδή, το fill="%23000" είναι κανονικό μαύρο (#000).

Με Adobe Illustrator:

Ανοίξτε το Adobe Illustrator. Κάντε κλικ στο "Αρχείο" και επιλέξτε "Άνοιγμα" για να φορτώσετε το αρχείο .PNG στο πρόγραμμα. Εξαγάγετε την εικόνα όπως απαιτείται πριν την αποθηκεύσετε ως αρχείο .SVG. Κάντε κλικ στο "Αρχείο" και επιλέξτε "Αποθήκευση ως". Δημιουργήστε ένα νέο όνομα αρχείου ή χρησιμοποιήστε ένα υπάρχον όνομα αρχείου. Βεβαιωθείτε ότι ο επιλεγμένος τύπος αρχείου είναι SVG. Επιλέξτε έναν κατάλογο και κάντε κλικ στην επιλογή Αποθήκευση για να αποθηκεύσετε το αρχείο.

Προτιμώ την τεχνητή νοημοσύνη γιατί μπορείτε να κάνετε οποιεσδήποτε αλλαγές

Πώς να μετατρέψετε την εικόνα PNG σε SVG;

Ωστόσο, αυτό δεν είναι ιδανικό.

Το Png είναι στυλ bitmap και το SVG είναι διανυσματικό γραφικό σχέδιοπου υποστηρίζει bitmaps, ώστε να μην μετατρέπει την εικόνα σε διανύσματα αλλά μόνο την εικόνα που είναι ενσωματωμένη διανυσματική μορφή. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας το http://www.inkscape.org/ το οποίο είναι δωρεάν. Θα το κάνει έγχυση, ωστόσο έχει και κινητήρα Live Trace που θα προσπαθήσει να το μετατρέψει σε μονοπάτια αν θέλεις (χρησιμοποιώντας potrace). Δείτε το μπροστινό ίχνος στο adobe illustrator (εμπορικό) είναι ένα παράδειγμα:

Υπάρχει μια ιστοσελίδα όπου μπορείτε να ανεβάσετε την εικόνα σας και να δείτε το αποτέλεσμα.

Αλλά αν θέλετε να κατεβάσετε μια εικόνα svg, πρέπει να εγγραφείτε. (Εάν εγγραφείτε θα λάβετε 2 εικόνες δωρεάν)

Αν είσαι σε κάποια Σύστημα Linux, το imagemagick είναι τέλειο. Εκείνοι.

Μετατροπή somefile.png somefile.svg

Αυτό λειτουργεί με μια δέσμη διαφορετικών μορφών.

Ωστόσο, για άλλα μέσα όπως βίντεο και ήχος (ffmpeg), Ξέρω ότι έχετε επισημάνει καθαρά το png στο svg. Είναι ακόμα συνδεδεμένο με τα μέσα.

ffmpeg -i somefile.mp3 somefile.ogg

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

Για f σε *.jpg; μετατρέψτε $f $(f%jpg)png; Ολοκληρώθηκε

Αυτό αφαιρεί το jpg και προσθέτει ένα png που σας λέει να μετατρέψετε αυτό που θέλετε.

Ανάλογα με το αν ΓιατίΕάν θέλετε να κάνετε μετατροπή από .png σε .svg, ίσως δεν χρειάζεται να ανησυχείτε. Η μετατροπή από .png (bitmap) σε .svg (διάνυσμα) μπορεί να είναι δύσκολη αν δεν είστε πολύ εξοικειωμένοι με τα διαθέσιμα εργαλεία ή εάν δεν είστε γραφίστας στο επάγγελμα.

Αν κάποιος σας στείλει μεγάλο αρχείοΜε υψηλής ανάλυσης(π.χ. 1024x1024) μπορείτε να αλλάξετε το μέγεθός του σε σχεδόν οποιοδήποτε μέγεθος θέλετε να χρησιμοποιήσετε στο GIMP. Συχνά υπάρχουν προβλήματα με την αλλαγή του μεγέθους μιας εικόνας εάν η ανάλυση (αριθμός pixel ανά ίντσα) είναι πολύ χαμηλή. Για να το διορθώσετε στο GIMP μπορείτε:

  1. Αρχείο -> Άνοιγμα: το αρχείο σας .png
  2. Εικόνα -> Ιδιότητες εικόνας: έλεγχος ανάλυσης και χρωματικού χώρου. Θέλετε ανάλυση γύρω στα 300 ppi. Στις περισσότερες περιπτώσεις, θέλετε ο χρωματικός χώρος να είναι RGB.
  3. Εικόνα -> Λειτουργία: ορίστε την τιμή RGB
  4. Εικόνα -> Κλίμακα εικόνας: Αφήστε το μέγεθος και ορίστε την ανάλυση Y σε 300 ή περισσότερο. Κλίμακα χτυπήματος.
  5. Εικόνα -> Κλίμακα εικόνας: Η ανάλυση πρέπει τώρα να είναι 300 και τώρα μπορείτε να αλλάξετε το μέγεθος της εικόνας σε σχεδόν οποιοδήποτε μέγεθος.

Δεν είναι τόσο εύκολο όσο η αλλαγή μεγέθους του αρχείου .svg, αλλά σίγουρα πιο εύκολο και πιο γρήγορο από το να προσπαθείτε να μετατρέψετε το .png σε .svg εάν έχετε ήδη ένα μεγάλη εικόναυψηλής ανάλυσης.

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

Η μετατροπή συνηθισμένων εικόνων, πιθανότατα, δεν θα έχει το επιθυμητό αποτέλεσμα.

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

  • Για μετατροπή σε SVG, επιλέξτε το αρχείο, περιμένετε να γίνει λήψη στον διακομιστή μας.
  • Υποστηρίζει σχεδόν όλες τις μορφές εικόνας (PNG, JPG, BMP και άλλες). Το μέγεθος του αρχείου δεν είναι περιορισμένο, αλλά όσο μεγαλύτερο είναι το αρχείο, τόσο περισσότερος χρόνος θα χρειαστεί για τη μετατροπή.
  • Μετά τη μετατροπή, θα δείτε το αρχικό σας αρχείο και το αποτέλεσμα κάτω από αυτό.
  • Κατεβάστε το αποτέλεσμα μέσω του συνδέσμου.

Γιατί χρειάζεστε τη μορφή SVG και πώς να τη χρησιμοποιήσετε; Μετά τη μετατροπή PNG σε SVG ή JPG σε SVG

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

Μερικές φορές καθίσταται απαραίτητο να αποθηκεύσετε το svg σε png χρησιμοποιώντας το πρόγραμμα περιήγησης. Δυστυχώς, το πρόγραμμα περιήγησης δεν διαθέτει ένα μαγικό api που θα σας επέτρεπε να το κάνετε αυτό χωρίς διάφορα hacks. Τι να κάνετε αν εξακολουθείτε να θέλετε να πετύχετε αυτό που θέλετε;

Η πρώτη ιδέα που μου ήρθε στο μυαλό ήταν να το κάνω μέσω καμβά, ο οποίος έχει ένα toDataURL("image/png");
Έτσι, έγραψα ένα απλό σενάριο: jsfiddle , github :

Var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:image/svg+xml;base64," + btoa(html); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.setAttribute("width", 526); canvas.setAttribute("ύψος", 233); var image = νέα εικόνα; image.src = imgsrc; image.onload = συνάρτηση () ( context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " αποθήκευση"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); );

Η ουσία του σεναρίου είναι απλή: μετέτρεψα το 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("image/png") . Αποδείχθηκε ένας τόσο απλός κώδικας: github :

var svg = document.querySelector("svg"); var canvas = document.createElement("καμβάς"); canvas.height = svg.getAttribute("ύψος"); canvas.width = svg.getAttribute("width"); canvg(canvas, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL("image/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), 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. Και έχουμε αυτό το αποτέλεσμα.

Ελπίζω το άρθρο να είναι χρήσιμο για εσάς και να εξοικονομήσετε χρόνο.