Το εργαλείο συνθέτει το pattern ως καθαρό SVG markup, οπότε το αποτέλεσμα μένει εξαιρετικά καθαρό σε οποιοδήποτε zoom ή πυκνότητα οθόνης και συνήθως ζυγίζει μόλις μερικές εκατοντάδες bytes, πολύ λιγότερο από ένα αντίστοιχο PNG tile. Αντιγράψτε το CSS για να βάλετε ένα επαναλαμβανόμενο background-image απευθείας σε ένα stylesheet, ή κατεβάστε το αυτόνομο αρχείο SVG για να το χρησιμοποιήσετε ως asset. Τίποτα από όσα φτιάχνετε δεν στέλνεται πουθενά: το pattern σχεδιάζεται εξ ολοκλήρου στη συσκευή σας, οπότε συνεχίζει να δουλεύει και offline μόλις φορτώσει η σελίδα.
Δωρεάν SVG Pattern Generator
Λειτουργεί εξ ολοκλήρου στον browser σας - χωρίς μεταφόρτωση, χωρίς εγγραφή.
Pattern
Στυλ
Προσκήνιο
Φόντο
Τι είναι ένα SVG pattern generator;
Είναι ένα εργαλείο που φτιάχνει ένα seamless, επαναλαμβανόμενο φόντο από γεωμετρικά σχήματα - τελείες, γραμμές, πλέγματα, zigzag. Επιλέγετε το σχήμα, τα χρώματα, το μέγεθος του πλακιδίου και το πάχος των γραμμών, και παίρνετε ένα μικροσκοπικό SVG που μένει καθαρό σε κάθε ανάλυση, μαζί με έτοιμο CSS. Όλα δημιουργούνται στον browser σας, τίποτα δεν ανεβαίνει πουθενά.
Πώς λειτουργεί
- 1Επιλέξτε pattern. Διαλέξτε ένα σχήμα - τελείες, δαχτυλίδια, πλέγμα, διαγώνιο, σταυρωτό, plus, zigzag και άλλα - από τα δείγματα.
- 2Ορίστε χρώματα και σχήμα. Επιλέξτε χρώμα προσκηνίου και φόντου (ή κάντε το φόντο διάφανο), μετά ρυθμίστε το μέγεθος, το πάχος και τη διαφάνεια ενώ η προεπισκόπηση ενημερώνεται σε πραγματικό χρόνο.
- 3Αντιγράψτε ή κατεβάστε. Εναλλάξτε ανάμεσα σε CSS και SVG, αντιγράψτε τον κώδικα, ή κατεβάστε το αυτόνομο αρχείο .svg για να το χρησιμοποιήσετε οπουδήποτε.
Σε ποιους απευθύνεται
- Web developers που θέλουν ένα διακριτικό, ελαφρύ φόντο σε ένα hero, ένα card ή μια ενότητα, χωρίς να φορτώνουν αρχείο εικόνας.
- UI και brand designers που δοκιμάζουν seamless υφές στα χρώματα του brand και τις εξάγουν ως καθαρό SVG.
- Όσοι φτιάχνουν emails και παρουσιάσεις και χρειάζονται ένα μικρό, επαναλαμβανόμενο pattern που μένει καθαρό σε κάθε οθόνη.
- Φοιτητές και ερασιτέχνες που θέλουν να καταλάβουν πώς δουλεύει το SVG
<pattern>και το CSS background tiling, πειραματιζόμενοι με τιμές και βλέποντας το αποτέλεσμα. - Δημιουργοί περιεχομένου που φτιάχνουν γρήγορα διακοσμητικά φόντα για thumbnails, banners και mockups.
Συχνές ερωτήσεις
Είναι δωρεάν το SVG pattern generator;
Ναι, είναι εντελώς δωρεάν, χωρίς εγγραφή και χωρίς όρια. Κάθε pattern δημιουργείται στον browser σας, οπότε μπορείτε να φτιάξετε και να αντιγράψετε όσα θέλετε, ακόμα και offline μόλις φορτώσει η σελίδα.
Τα patterns είναι όντως seamless;
Ναι. Κάθε σχήμα σχεδιάζεται έτσι ώστε οι άκρες του να ταιριάζουν ακριβώς με το διπλανό πλακίδιο, και το pattern επαναλαμβάνεται σε σταθερό πλέγμα. Τόσο το background-image σε CSS όσο και το στοιχείο <pattern> σε SVG καλύπτουν το ίδιο κελί άκρη με άκρη, χωρίς ορατές ραφές.
Να χρησιμοποιήσω CSS ή SVG;
Χρησιμοποιήστε το CSS για να επικολλήσετε ένα επαναλαμβανόμενο φόντο απευθείας σε ένα stylesheet - είναι το πιο γρήγορο για ιστοσελίδες. Χρησιμοποιήστε το SVG download όταν χρειάζεστε αυτόνομο αρχείο, για παράδειγμα ως image asset, σε εργαλείο design, ή ενσωματωμένο απευθείας σε HTML.
Γιατί SVG pattern αντί για PNG;
Το SVG είναι διανυσματικό, οπότε μένει τέλεια καθαρό σε κάθε zoom ή πυκνότητα οθόνης και δεν γίνεται ποτέ pixelated. Ένα γεωμετρικό SVG πλακίδιο συνήθως ζυγίζει μόλις μερικές εκατοντάδες bytes, πολύ λιγότερο από ένα αντίστοιχο PNG, και μπορείτε να αλλάξετε τα χρώματά του όποτε θέλετε χωρίς νέο export.
Μπορώ να κάνω το φόντο διάφανο;
Ναι. Επιλέξτε το Transparent και η γέμιση φόντου αφαιρείται, οπότε φαίνονται μόνο τα σχήματα προσκηνίου. Έτσι μπορείτε να βάλετε το pattern πάνω από ένα υπάρχον χρώμα, εικόνα ή gradient.
Ανεβαίνει κάπου ο σχεδιασμός μου;
Όχι. Όλο το pattern φτιάχνεται τοπικά στον browser σας με απλό SVG markup και τίποτα δεν στέλνεται σε server, οπότε τα χρώματα και οι ρυθμίσεις σας μένουν ιδιωτικά στη συσκευή σας.