SVG Grabber هر SVG در یک صفحه وب را کشف میکند — عناصر SVG inline، ارجاعات فایل .svg خارجی، SVG sprites (الگوهای use/symbol)، و SVG data URIs. هر SVG را در اندازههای مختلف پیشنمایش کنید، شفافیت را با پسزمینههای روشن و تیره بررسی کنید، markup خام SVG را کپی کنید یا فایلهای SVG بهینهشده را دانلود کنید.
SVGها در همه جای وبسایتهای مدرن هستند — لوگوها، آیکونها، تصویرسازیها، گرافیکهای تزئینی — اما استخراج آنها به طرز شگفتانگیزی دشوار است. SVG Grabber با همه این منابع بهطور خودکار کار میکند. DOM را برای SVGهای inline اسکن میکند، ارجاعات sprite را به تعاریف symbol کامل آنها حل میکند، URL های SVG خارجی را پیدا میکند و SVG data URI ها را رمزگشایی میکند.
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 را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
