SVG Grabber מאתר כל SVG בדף אינטרנט — אלמנטי SVG מוטבעים, הפניות לקבצי .svg חיצוניים, SVG sprites (תבניות use/symbol), ו-SVG data URIs. בצע תצוגה מקדימה של כל SVG בגדלים שונים, בדוק שקיפות על רקעים בהירים וכהים, העתק את ה-markup הגולמי של SVG, או הורד קבצי SVG מאופטמים.
SVGs נמצאים בכל אתר אינטרנט מודרני — לוגואים, אייקונים, איורים, גרפיקה דקורטיבית, ויזואליזציות נתונים — אך חילוץ שלהם מסובך באופן מפתיע. SVGs מוטבעים משובצים ישירות ב-HTML ולא ניתן לשמור אותם כתמונה. SVG sprites משתמשים בהפניות use/symbol שאינן מתייחסות לקבצים עצמאיים. SVGs חיצוניים הנטענים דרך img src או CSS אינם ניתנים לבדיקה מבלי לפתוח את לשונית הרשת. SVG Grabber מטפל בכל המקורות הללו אוטומטית. הוא סורק את ה-DOM עבור SVGs מוטבעים, מפרק הפניות sprite להגדרות symbol המלאות שלהן, מוצא URLs חיצוניים של SVG, ומפענח SVG data URIs. כל SVG מוצג בגלריה עם תצוגה מקדימה חיה, וניתן לעבור בין רקעים בהירים, כהים ושחמטים לאימות שקיפות. העתק את קוד ה-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 בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
