Διανυσματικό SVG (.svg)

W3C Τυπικό

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

Εφευρέτης: World Wide Web Consortium (W3C)Έτος: 2001MIME: image/svg+xml

Μετατροπή SVG σε PNG

Δωρεάν μετατροπέας από SVG σε PNG εντός του προγράμματος περιήγησης. Μετατρέψτε αρχεία άμεσα στη συσκευή σας.

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

Συμπίεση SVG στο διαδίκτυο

Ιδιωτικά - τα αρχεία δεν φεύγουν ποτέ από τη συσκευή σας

Συμπίεση SVG

Επιθεώρηση & Μεταδεδομένα

Τα λειτουργικά συστήματα και τα εργαλεία ανάλυσης αρχείων αναγνωρίζουν τα αρχεία SVG ελέγχοντας την αρχική δυαδική ακολουθία byte:

Επιλέξτε ή αποθέστε αρχεία εδώ

Ιδιωτικά - τα αρχεία δεν φεύγουν ποτέ από τη συσκευή σας

ή επικόλληση Ctrl+V

Εγγύηση Απορρήτου Μηδενικής Μετάδοσης Δικτύου: Δεν μεταφορτώνεται κανένα byte σε εξωτερικούς διακομιστές. Όλη η επεξεργασία γίνεται τοπικά στο απομονωμένο περιβάλλον του προγράμματος περιήγησής σας.

Υπογραφή κεφαλίδας σε επίπεδο byte (Magic Bytes)

ΔΕΚΑΕΞΑΔΙΚΗ ΥΠΟΓΡΑΦΗ (OFFSET 0):

3C 73 76 67

ΑΝΑΠΑΡΑΣΤΑΣΗ ASCII: <svg

Τυποποίηση: W3C Recommendation (SVG 1.1 / SVG 2)

Τεχνικές Προδιαγραφές

Αρχιτεκτονική Περιέκτη	Έγγραφο σήμανσης κειμένου βασισμένο σε XML που ορίζει γεωμετρία διανυσμάτων 2D
Συμπίεση	Συμπίεση κειμένου Gzip / Brotli (το SVGZ χρησιμοποιεί συμπίεση gzip)
Σειρά byte (endianness)	Δεν εφαρμόζεται (Ροή χαρακτήρων UTF-8 / UTF-16 βασισμένη σε κείμενο)
Χρωματικοί Χώροι	sRGB, CSS Color Module 4 (Display P3, lab, lch)
Κανάλια & Δομή	Διανυσματικά σχήματα απεριορίστης ανάλυσης, καμπύλες Bézier, τυπογραφία και μάσκες αδιαφάνειας
Μέγιστες Διαστάσεις	Ανεξάρτητο από ανάλυση (κλιμακώνεται απεριόριστα σε οποιαδήποτε περιοχή προβολής χωρίς πιξελοποίηση)
Διαφάνεια	Πλήρης μεταβλητή διαφάνεια άλφα και λειτουργίες ανάμειξης CSS
Ροή δεδομένων και προοδευτική φόρτωση	Υποστήριξη ανάλυσης ροής κειμένου προοδευτικά από τον αναλυτή XML του προγράμματος περιήγησης

Τεχνικός Πίνακας Σύγκρισης: SVG έναντι Ανταγωνιστών

Τεχνικό χαρακτηριστικό	SVG (Τρέχον)	HTML5 Canvas	PDF	PNG
Μοντέλο Απόδοσης	Διατηρημένο DOM διανυσμάτων λειτουργίας	Καμβάς bitmap άμεσης λειτουργίας	Διατηρημένο δοχείο σταθερής σελίδας λειτουργίας	Πλέγμα εικονοστοιχείων ράστερ
Στυλ & CSS	Πλήρως διαμορφώσιμο στυλ μέσω κλάσεων και μεταβλητών CSS	Απαιτεί επανασχεδίαση API καμβά JavaScript	Χωρίς δυναμικό στυλ CSS	Σταθερά pixel ράστερ
Απεριόριστη κλιμάκωση	Ναι (μαθηματικές διανυσματικές καμπύλες)	Απαιτεί χειροκίνητη κλιμάκωση ανάλυσης	Ναι (διανυσματικά στοιχεία)	Όχι (εμφανίζεται εικονοστοιχείωση κατά τη μεγέθυνση)
Διαδραστικότητα	Εγγενή συμβάντα DOM (αιώρηση, κλικ, κινούμενα σχέδια)	Απαιτεί χειροκίνητους υπολογισμούς για την ανίχνευση επιλογής.	Στατικό έγγραφο	Απαιτεί χάρτη εικόνας ή καμβά

Συνήθεις τρόποι καταστροφής δεδομένων και οδηγός ανάκτησης δεκαεξαδικών δεδομένων

Το πρόγραμμα περιήγησης εμφανίζει Σφάλμα Ανάλυσης XML: μη κλεισμένο διακριτικό ή μη ταιριασμένη ετικέτα.

Βασική Αιτία: Κακοσχηματισμένη σύνταξη XML, ελλείπουσες ετικέτες κλεισίματος ή χαρακτήρες & που δεν έχουν διαφύγει (το «&» αντί για «&»).

Ανάκτηση: Ελέγξτε το αρχείο με εργαλείο ελέγχου XML (xmllint file.svg) και διορθώστε τις μη ισορροπημένες ετικέτες.

Ανάλυση ασφάλειας και διανύσματα επίθεσης στον αναλυτή

Επειδή το SVG είναι εκτελέσιμο XML που υποστηρίζει ετικέτες '<script>' και εξωτερικές οντότητες, παρουσιάζει σημαντικούς κινδύνους XSS και SSRF εάν εμφανίζονται μη αξιόπιστα SVG.

Γνωστά διανύσματα επίθεσης

Αποθηκευμένο Cross-Site Scripting (XSS) μέσω ενσωματωμένων ετικετών '<script>' ή χειριστών συμβάντων 'onload='.
Επιθέσεις XML External Entity (XXE) που διαβάζουν τοπικά αρχεία διακομιστή όταν αναλύονται σε διακομιστές backend.
Επέκταση οντότητας XML Billion Laughs που προκαλεί άρνηση εξυπηρέτησης.

Βέλτιστες αμυντικές πρακτικές: Να απολυμαίνετε πάντα τα SVG χρησιμοποιώντας το DOMPurify πριν από την ενσωμάτωση, ή να σερβίρετε SVG με 'Content-Security-Policy: default-src 'none'' ή ως ετικέτες '<img>' που απενεργοποιούν αυτόματα τα scripts.

Ιστορική Αναδρομή & Ορόσημα

2018Η υποψήφια σύσταση SVG 2 του W3C ενσωματώνει σύγχρονες δυνατότητες μορφοποίησης CSS.

2011Το SVG 1.1 (δεύτερη έκδοση) συνέβαλε στην ευρεία υποστήριξη του SVG σε προγράμματα περιήγησης για υπολογιστές και κινητά.

2001Το W3C δημοσιεύει την προδιαγραφή SVG 1.0 που αναπτύχθηκε από προτάσεις VML και PGML.

Κύρια Πλεονεκτήματα

Ανεξαρτησία άπειρης ανάλυσης: καθαρές γραμμές και τυπογραφία σε οποιαδήποτε κλίμακα οθόνης ή εκτύπωσης.
Εξαιρετικά μικρό μέγεθος αρχείου για λογότυπα, εικονίδια και στοιχεία διεπαφής UI.
Πλήρως προγραμματίσιμο και με δυνατότητα εφαρμογής στυλ μέσω CSS και JavaScript εντός του DOM του προγράμματος περιήγησης.

Τεχνικοί Περιορισμοί & Μειονεκτήματα

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

Ενδιαφέροντα Τεχνικά Στοιχεία

Το Gzip μπορεί να μειώσει σημαντικά το μέγεθος ορισμένων αρχείων SVG· η μείωση εξαρτάται από το περιεχόμενο του εγγράφου και τις ρυθμίσεις συμπίεσης.
Το χαρακτηριστικό viewBox ορίζει έναν αφηρημένο καμβά συντεταγμένων που χαρτογραφείται δυναμικά στα φυσικά pixel της οθόνης.
Τα πρώτα προγράμματα περιήγησης ιστού αρχικά δεν διέθεταν εγγενείς μηχανές SVG, ωθώντας την Adobe να διανείμει το πρόσθετο προγράμματος περιήγησης Adobe SVG Viewer προτού παγιωθεί η εγγενής υποστήριξη προγράμματος περιήγησης γύρω στο 2011.

Συχνές Τεχνικές Ερωτήσεις

Μπορούν τα αρχεία SVG να περιέχουν κακόβουλο κώδικα;

Ναι. Επειδή το SVG είναι έγκυρο XML, μπορεί να περιέχει ενσωματωμένη JavaScript ('<script>') που εκτελείται εάν το SVG φορτωθεί απευθείας σε πρόγραμμα περιήγησης ή ανοίξει σε ενσωματωμένο στοιχείο '<svg>'. Η εξυπηρέτηση SVG μέσω ετικέτας '<img>' εξουδετερώνει αυτόματα την εκτέλεση σεναρίου.

Πότε πρέπει να χρησιμοποιώ SVG αντί για PNG;

Χρησιμοποιήστε SVG για εικονίδια, λογότυπα, διαγράμματα, εικονογραφήσεις και τυπογραφία όπου απαιτείται καθαρή κλιμάκωση σε όλα τα μεγέθη οθόνης και μικρά μεγέθη αρχείων. Χρησιμοποιήστε PNG ή WebP για φωτογραφίες.

Πώς μπορώ να βελτιστοποιήσω μεγάλα ή σύνθετα αρχεία SVG;

Μπορείτε να καθαρίσετε τα διανυσματικά μονοπάτια αφαιρώντας πλεονάζοντα μεταδεδομένα, σχόλια συντάκτη (από το Inkscape ή το Illustrator), αόρατες ομάδες και αχρησιμοποίητες δηλώσεις ονομαστικού χώρου χρησιμοποιώντας εργαλεία όπως το SVGO ή εκτελώντας συμπίεση SVG.

Σχετικά ζεύγη μετατροπής για SVG

SVG σε PNG

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

PNG σε SVG

Ενσωματώστε εικόνες PNG ράστερ σε ένα διανυσματικό κοντέινερ SVG XML για προσαρμοστική κλιμάκωση στον ιστό και ενσωμάτωση σε διατάξεις συμβατές με διανυσματικά γραφικά.

WMF σε SVG

Μετατρέψτε παλαιότερα 16-bit αρχεία σχεδίασης Windows GDI σε σύγχρονα, κλιμακούμενα μονοπάτια SVG χωρίς καμία απώλεια ανάλυσης.

EMF σε SVG

Μετατρέψτε γραφικά Windows Enhanced Metafile 32-bit σε καθαρά, προσαρμοζόμενα διανυσματικά γραφικά SVG για τον ιστό και λογισμικό σχεδίασης.

DXF σε SVG

Η μετατροπή ενός σχεδίου DXF σε αρχείο εξαγωγής CAD SVG μετατρέπει πολύπλοκα διανυσματικά δεδομένα μηχανικής σε ελαφριά γραφικά XML για προγράμματα περιήγησης ιστού και επεξεργαστές διανυσματικών γραφικών.

SVG σε DXF

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

SVG σε PDF

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