SVG Grabber מאתר כל SVG בדף אינטרנט — אלמנטי SVG מוטבעים, הפניות לקבצי .svg חיצוניים, SVG sprites (תבניות use/symbol), ו-SVG data URIs. בצע תצוגה מקדימה של כל SVG בגדלים שונים, בדוק שקיפות על רקעים בהירים וכהים, העתק את ה-markup הגולמי של SVG, או הורד קבצי SVG מאופטמים.
קבצי SVG נמצאים בכל מקום באתרי אינטרנט מודרניים - לוגואים, אייקונים, איורים, גרפיקה דקורטיבית, ויזואליזציות נתונים - אבל חילוץ שלהם קשה באופן מפתיע. SVG-ים מוטבעים (inline) משובצים ישירות ב-HTML ולא ניתנים ל"שמירה כתמונה". ספרייטים של SVG משתמשים בהתייחסויות use/symbol שלא נפתרות לקבצים עצמאיים. SVG-ים חיצוניים שנטענים דרך img src או CSS לא ניתנים לבדיקה בלי לפתוח את לשונית הרשת.
SVG Grabber מטפל בכל המקורות האלה אוטומטית. הוא סורק את ה-DOM עבור SVG-ים מוטבעים, פותר התייחסויות ספריי לחלקי הגדרות ה-symbol המלאות שלהם, מוצא כתובות URL של SVG חיצוניים, ומפענח data URIs של SVG. כל SVG מוצג בגלריה עם תצוגה מקדימה חיה, ותוכל לעבור בין רקעים בהירים, כהים ומשובצים (checkerboard) כדי לאמת שקיפות.
קבצי SVG שמשתמשים ב-currentColor למילוי (fill) או למתאר (stroke) שלהם - דפוס נפוץ עבור אייקונים שאמורים לרשת את הצבע שלהם מהטקסט שמסביב - מזוהים ומסומנים, מכיוון שחילוץ הקוד הגולמי עבורם שומר על התנהגות עיצוב הצבע שלהם, בניגוד לצילום מסך מרוסטר שהיה קובע לצמיתות איזה צבע שהיה מוצג ברגע הצילום. העתק את קוד ה-SVG הגולמי להטמעה ברכיבים שלך, או הורד את ה-SVG כקובץ מוכן לשימוש בפרויקט שלך.
מוצא SVGs מכל מקור בדף: אלמנטי <svg> מוטבעים ב-DOM, קבצי .svg חיצוניים הנטענים דרך תגיות img או object, SVGs של CSS background-image, הפניות use/symbol sprite (מפורקות ל-SVGs מלאים), ו-SVGs מקודדים כ-base64 data URI.
בצע תצוגה מקדימה של כל SVG בגדלים שונים (מקורי, 2x, 4x) על שלושה רקעים: כהה, בהיר (לבן) ושחמט. הרקע השחמטי חושף אזורי שקיפות שעלולים להיות בלתי נראים על רקע חד-גוני.
לחץ על "Copy SVG" כדי לקבל את ה-markup המלא של SVG — viewBox, נתיבים, קבוצות וכל המאפיינים כלולים. הדבק ישירות ב-HTML, JSX, תבנית Vue, או קובץ SVG sprite. הקוד נקי ומעוצב כהלכה.
הורד SVGs בודדים כקבצי .svg עם הצהרות XML ואנקוד תקינים. הקבצים נקראים על פי ה-ID, שם הקלאס, או aria-label של ה-SVG — ולא שמות גנריים כמו "download.svg".
כל SVG מציג את סוג המקור שלו (מוטבע, חיצוני, sprite, data URI), ממדי viewBox, גודל קובץ, והיכן ב-DOM הוא נמצא. שימושי להבנת אופן יישום אסטרטגיית ה-SVG באתר.
כאשר דף משתמש ב-SVG sprites עם הפניות use href="#icon-name", SVG Grabber מפרק כל הפניה להגדרת symbol המלאה — ומעניק לך את ה-SVG העצמאי המלא, לא רק את אלמנט use.
בקר באתר עם מערכת אייקונים מצוינת ואסוף את ערכת אייקוני ה-SVG כולה. SVG Grabber מוצא אייקונים ב-sprites, SVGs מוטבעים וקבצים חיצוניים — ואוסף את ספריית האייקונים המלאה ללא קשר לאופן היישום.
צריך את לוגו ה-SVG של חברה לדף שותפות, מקרה בוחן, או ערכת עיתונות? רוב הלוגואים באתרים מודרניים הם SVGs. SVG Grabber מוצא ומחלץ אותם באיכות הווקטורית המקורית שלהם — ניתנת להגדלה אינסופית.
חוקר כיצד אתרי ייצור מיישמים איורי SVG מורכבים, אנימציות, או ויזואליזציות נתונים. העתק את קוד ה-SVG הגולמי לבדיקת מבנה הנתיבים, הגדרת viewBox, ואופן יישום אנימציות CSS.
עובר למערכת אייקונים חדשה? אסוף SVGs מהאתר הרפרנטי, הכנס אותם ל-SVG sprite שלך או למערכת אייקונים מבוססת רכיבים. קוד SVG נקי עם ערכי viewBox תקינים מוכן לשילוב.
בדוק כיצד SVGs מיושמים באתר שלך — האם הם מוטבעים (טוב לתפעול), חיצוניים (טוב למטמון), או sprites (טוב ליעילות)? SVG Grabber מציג את סוג המקור לכל SVG, ומסייע לך לאופטם את אסטרטגיית ה-SVG שלך.
פתח את ה-floating dock של DevSuite Pro ולחץ על אייקון SVG Grabber. הכלי סורק את הדף עבור כל מקורות ה-SVG ובונה את הגלריה.
רשת של תמונות ממוזערות של SVG מופיעה ומציגה כל SVG שנמצא בדף. כל ערך מציג את שם ה-SVG, סוג המקור וממדי viewBox.
לחץ על כל SVG לפתיחת תצוגה מקדימה גדולה יותר. עבור בין רקעים כהים, בהירים ושחמטים. שנה את גודל התצוגה המקדימה כדי לראות כיצד ה-SVG מתרחב.
לחץ על "Copy SVG" לקבלת ה-markup הגולמי לשילוב בקוד שלך, או על "Download" לשמירתו כקובץ .svg עצמאי במכשיר שלך.
נווט חזרה לגלריה לחקירת SVGs נוספים. תגית הספירה מציגה את המספר הכולל שנמצא בדף.
התקן את DevSuite Pro בחינם ופתח 64+ כלי פיתוח לדפדפן שלך.
