مولد الگوهای SVG

این مولد الگوی SVG چه کاری انجام می‌دهد

این ابزار با استفاده از یک SVG، الگوی پس‌زمینهٔ SVG خودکفا و بی‌نهایت قابل‌تکراری ایجاد می‌کند <pattern> در پشت صحنه از یک element استفاده می‌کند تا در هر اندازه‌ای واضح و یکپارچه بماند — بدون نیاز به ترفندهای تکرار background-image. از میان هشت سبک الگو (نقطه‌ای، راه‌راه، خطوط شبکه، شطرنجی، ضربدری، زیگزاگ، موجی و مثلثی) انتخاب کنید، سپس رنگ‌ها، اندازهٔ کاشی، اندازهٔ شکل، شفافیت و چرخش را تنظیم کنید تا نتیجهٔ دلخواهتان به دست بیاید. اگر به‌جای تنظیم دستی تک‌تک گزینه‌ها به دنبال ایده هستید، روی تصادفی‌سازی کلیک کنید.

نحوه استفاده

• نوع الگو را از فهرست کشویی انتخاب کنید.
• یک رنگ پس‌زمینه و یک رنگ برای شکل تعیین کنید.
• اندازهٔ کاشی (فاصلهٔ بین واحدهای تکرارشونده)، اندازه و ضخامت شکل، شفافیت و چرخش را با اسلایدرها تنظیم کنید.
• با تغییر تنظیمات، پیش‌نمایش زنده را ببینید که فوراً به‌روزرسانی می‌شود.
• کد خام SVG را کپی کنید، CSS آمادهٔ جای‌گذاری را با الگوی جاسازی‌شده به‌صورت data URI کپی کنید، یا آن را به‌عنوان یک فایل مستقل .svg دانلود کنید.

چرا به‌جای پس‌زمینه PNG یا JPG از الگوی SVG استفاده کنیم

الگوهای SVG در هر سطح بزرگ‌نمایی یا وضوح صفحه‌ای واضح باقی می‌مانند، چون مبتنی بر بردار هستند؛ همچنین حجم فایل معمولاً کسری از تصویر شطرنجی معادل است — اغلب بسیار کمتر از یک کیلوبایت. چون الگو یک‌بار تعریف می‌شود و خود رندرکنندهٔ SVG آن را تکرار می‌کند، دیگر لازم نیست نگران هماهنگ‌کردن ابعاد تصویر با کانتینر یا دیده‌شدن درزها در لبه‌های کاشی باشید.

موارد استفاده رایج

• پس‌زمینه‌های ظریف برای بخش‌های وب‌سایت که به بافت نیاز دارند، بدون اینکه حواس کاربر را از محتوا پرت کنند.
• پس‌زمینه‌های الگوی شاخص در پشت تیترها، مشابه چیزی که در بسیاری از صفحه‌های فرود سرویس‌های SaaS می‌بینید.
• ماکاپ‌های بسته‌بندی، برندسازی یا چاپ بر اساس سفارش که به یک الگوی هندسی تکرارشونده نیاز دارند.
• پس‌زمینه‌های جایگزین یا حالت خالی در رابط کاربری اپلیکیشن.

پرسش‌های متداول

آیا این الگو واقعاً به‌صورت یکپارچه تکرار می‌شود؟

بله — چون با قابلیت بومی SVG ساخته شده است <pattern> عنصر، خود مرورگر تکرار را مدیریت می‌کند؛ بنابراین هیچ‌وقت درزی قابل‌مشاهده‌ای ایجاد نمی‌شود، برخلاف چیزی که گاهی در کاشی‌های شطرنجیِ رستریِ تراز‌شده به‌صورت دستی دیده می‌شود.

آیا می‌توانم از الگوی تولیدشده به‌عنوان پس‌زمینه CSS استفاده کنم؟

بله، از دکمه «کپی CSS» استفاده کنید تا یک کد آماده برای جای‌گذاری دریافت کنید background-image قاعده‌ای با SVG که مستقیماً به‌صورت URI داده‌ای در آن جاسازی شده است — بدون نیاز به میزبانی فایل تصویری جداگانه.

آیا می‌توانم بعد از کپی‌کردن SVG، رنگ‌ها را ویرایش کنم؟

کاملاً — نشانه‌گذاری SVG متن ساده است؛ بنابراین می‌توانید آن را در هر ویرایشگر کدی باز کنید و مقادیر رنگ fill یا stroke را مستقیماً تغییر دهید، یا همین‌جا برگردید، انتخاب‌گرهای رنگ را تنظیم کنید و دوباره کپی بگیرید.

نوار لغزندهٔ چرخش دقیقاً چه کاری انجام می‌دهد؟

کل کاشی تکرارشونده را با استفاده از یک SVG می‌چرخاند patternTransform، که برای نوارها، خطوط شبکه، علامت‌های بعلاوه و زیگزاگ‌ها بسیار کاربردی است؛ جاهایی که تغییر زاویه، ظاهر کلی الگو را کاملاً تغییر می‌دهد.

آیا این ابزار برای چاپ هم مناسب است، نه فقط وب؟

بله — چون SVG یک قالب برداری است، می‌توانید فایل .svg دانلودشده را برای هر اندازه چاپی بزرگ کنید، بدون اینکه کیفیت آن کاهش پیدا کند؛ بنابراین برای بسته‌بندی یا پس‌زمینه پوستر هم مناسب است.