SVG Grabber هر SVG در یک صفحه وب را کشف میکند — عناصر SVG inline، ارجاعات فایل .svg خارجی، SVG sprites (الگوهای use/symbol)، و SVG data URIs. هر SVG را در اندازههای مختلف پیشنمایش کنید، شفافیت را با پسزمینههای روشن و تیره بررسی کنید، markup خام SVG را کپی کنید یا فایلهای SVG بهینهشده را دانلود کنید.
SVGها همهجای وبسایتهای مدرن حضور دارند — لوگوها، آیکونها، تصویرسازیها، گرافیکهای تزئینی، نمودارهای داده — اما استخراج آنها بهطرز شگفتآوری دشوار است. SVGهای درونخطی (inline) مستقیماً در HTML جاسازی شدهاند و نمیتوان آنها را «بهعنوان تصویر ذخیره کرد». اسپرایتهای SVG از ارجاعهای use/symbol استفاده میکنند که به فایلهای مستقل resolve نمیشوند. SVGهای خارجی که از طریق src در img یا CSS بارگذاری میشوند، بدون باز کردن تب Network قابل بررسی نیستند.
SVG Grabber همه این منابع را بهطور خودکار مدیریت میکند. این ابزار DOM را برای SVGهای درونخطی اسکن میکند، ارجاعهای اسپرایت را به تعریف کامل symbol آنها resolve میکند، آدرسهای SVG خارجی را پیدا میکند و data URIهای SVG را دیکد میکند. هر SVG با پیشنمایش زنده در یک گالری نمایش داده میشود و میتوانید بین پسزمینههای روشن، تیره و شطرنجی (checkerboard) جابهجا شوید تا شفافیت را بررسی کنید.
SVGهایی که برای fill یا stroke خود از currentColor استفاده میکنند — الگویی رایج برای آیکونهایی که قرار است رنگ خود را از متن اطراف به ارث ببرند — شناسایی و علامتگذاری میشوند، چون گرفتن کد خام برای اینها رفتار رنگپذیری (color-theming) آنها را حفظ میکند، برخلاف یک اسکرینشات رستری که هر رنگی که در لحظه ضبط نمایش داده میشده را برای همیشه در تصویر ثابت میکند. کد خام SVG را برای استفاده درونخطی در کامپوننتهای خود کپی کنید، یا SVG را بهعنوان یک فایل آماده برای استفاده در پروژهتان دانلود کنید.
SVGها را از هر منبعی در صفحه پیدا میکند: عناصر <svg> inline در DOM، فایلهای .svg خارجی بارگذاریشده از طریق img یا object، SVGهای CSS background-image، ارجاعات sprite use/symbol، و SVGهای رمزگذاریشده base64 data URI.
هر SVG را در اندازههای مختلف (اصلی، 2x، 4x) با سه پسزمینه پیشنمایش کنید: تیره، روشن (سفید) و شطرنجی. پسزمینه شطرنجی نواحی شفاف را آشکار میکند.
روی «کپی SVG» کلیک کنید تا markup کامل SVG را دریافت کنید — viewBox، paths، groups و همه ویژگیها. مستقیماً در HTML، JSX، قالب Vue یا فایل SVG sprite الصاق کنید.
SVGهای جداگانه را به عنوان فایلهای .svg با اعلانهای XML مناسب دانلود کنید. فایلها بر اساس ID، نام کلاس یا aria-label SVG نامگذاری میشوند.
هر SVG نوع منبع (inline، خارجی، sprite، data URI)، ابعاد viewBox، اندازه فایل و محل در DOM را نشان میدهد.
وقتی یک صفحه از SVG sprites با ارجاعات use href="#icon-name" استفاده میکند، SVG Grabber هر ارجاع را به تعریف symbol کامل حل میکند — SVG مستقل کامل را میدهد.
از وبسایتی با سیستم آیکون عالی بازدید کنید و کل مجموعه آیکون SVG را دریافت کنید. SVG Grabber آیکونها را در sprites، SVGهای inline و فایلهای خارجی پیدا میکند.
به لوگوی SVG یک شرکت برای صفحه مشارکت، case study یا press kit نیاز دارید؟ اکثر لوگوهای وبسایتهای مدرن SVG هستند. SVG Grabber آنها را با کیفیت vector اصلی استخراج میکند.
مطالعه پیادهسازی SVGهای پیچیده در سایتهای تولید. کد SVG خام را کپی کنید تا ببینید paths چگونه ساختاریافتهاند و انیمیشنهای CSS چگونه اعمال میشوند.
به سیستم آیکون جدید منتقل میشوید؟ SVGها را از سایت مرجع بگیرید و در SVG sprite یا سیستم آیکون مبتنی بر کامپوننت قرار دهید.
بررسی کنید SVGها در سایت شما چگونه پیادهسازی شدهاند — inline (برای دستکاری)، خارجی (برای کش) یا sprites (برای کارایی)؟
داک شناور DevSuite Pro را باز کنید و روی آیکون SVG Grabber کلیک کنید. ابزار صفحه را برای همه منابع SVG اسکن میکند.
یک grid از thumbnail های SVG ظاهر میشود که هر SVG یافتهشده در صفحه را نشان میدهد. هر آیتم نام SVG، نوع منبع و ابعاد viewBox را نشان میدهد.
روی هر SVG کلیک کنید تا یک پیشنمایش بزرگتر باز شود. بین پسزمینههای تیره، روشن و شطرنجی جابهجا شوید.
روی «کپی SVG» کلیک کنید تا markup خام را دریافت کنید، یا «دانلود» تا به عنوان فایل .svg مستقل ذخیره شود.
به گالری برگردید تا SVGهای بیشتری کاوش کنید. badge تعداد کل یافتهشده در صفحه را نشان میدهد.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
