What does the SVG Preview tool do?

It renders SVG markup live as you type, shows extracted attributes (width, height, viewBox), and produces a data: URI you can paste straight into CSS or HTML. Useful for debugging SVG icons, gradients, and viewBox math without spinning up a project.

Is the preview sandboxed?

Yes. The SVG renders inside a sandboxed iframe to isolate it from the rest of the page. Inline JavaScript inside the SVG won't run.

Can I download or copy the SVG?

Yes — copy the raw SVG text or the URL-encoded data: URI from the controls in the header.

תצוגה מקדימה / עורך SVG

רקע משובץ

רוחב: 200גובה: 200viewBox: 0 0 200 2007 אלמנטים

מקור SVG

תצוגה מקדימה

פרטים טכניים

איך תצוגה מקדימה / עורך SVG עובד

מה הכלי עושה

תצוגה מקדימה / עורך SVG מרנדר סימון SVG בזמן אמת בזמן שאתם עורכים אותו ומחלץ מטא-נתונים (רוחב, גובה, viewBox, מספר אלמנטים) לבדיקה מהירה. מתג מוסיף רקע משובץ כדי שתוכלו לראות אזורים שקופים בבירור. הכלי גם מייצר data URI מקודד-URL שמתאים לשימוש ישיר ב-CSS background-image או במאפייני src של HTML.

מקרי שימוש נפוצים למפתחים

מעצבי אייקונים בודקים חישובי viewBox ורוחבי stroke בגדלים שונים. מפתחי פרונטאנד מוודאים שאייקון SVG שנערך ידנית עדיין מרונדר נכון לאחר אופטימיזציה (ידנית או דרך SVGO). מפתחי אימיילים מייצרים גרסאות data URI קומפקטיות של סימני מותג לצורך הטמעה בתוך HTML. מחנכים מדגימים כיצד מאפיינים כמו preserveAspectRatio ו-overflow משפיעים על הרינדור.

פורמטי נתונים, טיפוסים או וריאנטים

הקלט הוא סימון XML גולמי של SVG. הפלט הוא אותו SVG מרונדר בתוך iframe מבודד בנוסף ל-data URI מקודד-URL (data:image/svg+xml;charset=utf-8,…). מדד ספירת האלמנטים סופר כל תגית פתיחה (כולל defs, g, גרדיאנטים ואלמנטים מקוננים דומים), ונותן תחושה גסה של מורכבות. ערכי מאפיינים שחולצו מוצגים בצורה גולמית.

מלכודות נפוצות ומקרי קצה

משאבים חיצוניים שמופנים על ידי אלמנטים `use` או `image` עם href לא ייטענו בתוך ה-iframe המבודד. JavaScript מוטמע בתוך אלמנטים של script נחסם על ידי ה-sandbox — אנימציות צריכות להסתמך על SMIL או על CSS keyframes. SVG-ים שתלויים בגופן מסוים שאינו מותקן במערכת יעברו לגופן ברירת מחדל; הטמיעו גופנים או השתמשו בגופני מערכת לתצוגות מקדימות.

מתי להשתמש בכלי הזה לעומת קוד

השתמשו בכלי הדפדפן לעיצוב אייקונים חד-פעמי, דיבוג או יצירת data URI-ים. עבור נכסים בסביבת ייצור, הריצו SVG-ים דרך SVGO עם קונפיג מותאם כדי להסיר מטא-נתונים ולמזער סימון, והשתמשו במערכת sprites או באינטגרציה נכונה עם הבאנדלר כדי לטעון אייקונים באפליקציה במקום להטמיע data URI-ים בכל מקום.