پیش‌نمایش / ویرایشگر SVG

پیش‌نمایشگر / ویرایشگر SVG چگونه کار می‌کند

این ابزار چه کاری انجام می‌دهد

پیش‌نمایشگر / ویرایشگر SVG نشانه‌گذاری SVG را هنگام ویرایش به‌صورت زنده رندر می‌کند و فراداده (width، height، viewBox، تعداد عناصر) را برای بررسی سریع استخراج می‌کند. یک کلید، پس‌زمینهٔ شطرنجی اضافه می‌کند تا نواحی شفاف را واضح ببینید. این ابزار همچنین یک data URI با URL-encoding تولید می‌کند که برای استفادهٔ مستقیم در CSS background-image یا ویژگی‌های HTML src مناسب است.

موارد استفادهٔ رایج برای توسعه‌دهندگان

طراحان آیکن محاسبات viewBox و ضخامت stroke را در اندازه‌های مختلف آزمایش می‌کنند. توسعه‌دهندگان فرانت‌اند بررسی می‌کنند که یک آیکن SVG ویرایش‌شدهٔ دستی پس از بهینه‌سازی (دستی یا با SVGO) همچنان درست رندر می‌شود. توسعه‌دهندگان ایمیل نسخه‌های فشردهٔ data URI از نشان‌های برند تولید می‌کنند تا در HTML به‌صورت inline قرار دهند. مدرسان نشان می‌دهند که ویژگی‌هایی مانند preserveAspectRatio و overflow چگونه روی رندر اثر می‌گذارند.

قالب‌ها، نوع‌ها یا گونه‌های داده

ورودی، نشانه‌گذاری خام XML برای SVG است. خروجی همان SVG است که در یک iframe سندباکس‌شده رندر می‌شود، به‌علاوهٔ یک data URI با URL-encoding (data:image/svg+xml;charset=utf-8,…). معیار تعداد عناصر، هر تگ باز را می‌شمارد (از جمله defs، g، گرادیان‌ها و عناصر تو‌در‌توی مشابه) و یک برآورد کلی از پیچیدگی می‌دهد. مقادیر ویژگی‌های استخراج‌شده به شکل خام نمایش داده می‌شوند.

دام‌های رایج و حالت‌های لبه‌ای

منابع خارجی که توسط عناصر `use` یا `image` با href ارجاع داده می‌شوند، داخل iframe سندباکس‌شده بارگذاری نمی‌شوند. جاوااسکریپت درون‌خطی داخل عناصر script توسط سندباکس مسدود است — انیمیشن‌ها باید به SMIL یا CSS keyframeها متکی باشند. SVGهایی که به فونت خاصی وابسته‌اند و روی سیستم نصب نیست، به یک فونت پیش‌فرض fallback می‌کنند؛ برای پیش‌نمایش، فونت‌ها را embed کنید یا از فونت‌های سیستم استفاده کنید.

چه زمانی از این ابزار استفاده کنیم در برابر کُد

از ابزار مرورگری برای طراحی آیکن یک‌باره، دیباگ، یا تولید data URI استفاده کنید. برای دارایی‌های تولیدی، SVGها را با SVGO و یک پیکربندی تنظیم‌شده اجرا کنید تا فراداده حذف و نشانه‌گذاری minify شود، و به‌جای inline کردن data URI در همه‌جا، از یک سیستم sprite یا یکپارچه‌سازی درست با bundler برای بارگذاری آیکن‌ها در اپ خود استفاده کنید.