What is an SVG placeholder image?

An SVG placeholder is a lightweight, scalable vector image used during development or design to represent a final image that hasn't been created yet. Because SVG is text-based, placeholders are tiny in file size and render crisp at any resolution.

How do I use the SVG data URI in HTML?

Paste the data URI directly into the src attribute of an img tag: . This embeds the image inline without any external HTTP request, making it ideal for mockups, emails, and rapid prototyping.

What presets are available?

The tool includes common presets: 16:9 (1280x720), 4:3 (800x600), 1:1 square (400x400), Banner (728x90), OG Image (1200x630), and Twitter Card (1200x675). You can also enter any custom width and height.

Can I customise the text and colours?

Yes. You can set any background colour, text colour, and custom label text. If you leave the text blank, the tool defaults to showing the image dimensions (e.g. 400x300).

מחולל מצייני מקום SVG

281 Bמוכן

קביעה מראש

רקע#cccccc

טקסט#333333

תווית

תצוגה מקדימה

סימון SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect fill="#cccccc" width="400" height="300"/><text fill="#333333" font-family="sans-serif" font-size="50" text-anchor="middle" dominant-baseline="central" x="200" y="150">400×300</text></svg>

URI של נתונים

פרטים טכניים

כיצד פועל מחולל מצייני המקום של SVG

מה הכלי עושה

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

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

מפתחי פרונטאנד משתמשים במצייני מקום של SVG במהלך פרוטוטייפינג כדי לשמור מקום בפריסה לפני שתמונות אמיתיות זמינות, וכך להימנע מהסטת פריסה מצטברת (CLS). הם שימושיים במערכות עיצוב עבור נפילות חזרה (fallbacks) לאווטארים, שלדי תמונות ממוזערות ומכלי תמונה רספונסיביים. מפתחי אימיילים מטמיעים מצייני מקום של data URI בתבניות HTML שבהן טעינת תמונות חיצוניות עשויה להיחסם על ידי לקוחות דוא"ל.

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

הפלט הוא מסמך SVG 1.1 תקני המכיל מלבן מלא ואלמנט טקסט ממורכז. גרסת ה-data URI מקודדת את ה-SVG הזה כמחרוזת Base64 עם הקידומת 'data:image/svg+xml;base64,' לשימוש ישיר במאפייני img src, במאפייני CSS background-image או ב-HTML מוטמע. הממדים מצוינים בפיקסלים אך ה-SVG מתרחב לכל גודל מיכל ללא פיקסול, מכיוון שזהו פורמט וקטורי.

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

דאטה URI אינם נשמרים במטמון של הדפדפנים באופן עצמאי מהמסמך שבו הם מוטמעים, ולכן שימוש באותו placeholder על פני דפים רבים מגדיל את נפח ההעברה הכולל בהשוואה לקובץ חיצוני יחיד שנשמר במטמון. תוויות טקסט ארוכות מאוד עלולות לחרוג מ־viewBox של ה־SVG אם הממדים קטנים. חלק מלקוחות דוא"ל ישנים אינם תומכים ב־SVG data URIs, ולכן חוזרים לאייקון של תמונה שבורה. כותרות Content Security Policy (CSP) עשויות לחסום data URIs מוטמעים אם 'data:' אינו כלול ב־img-src.

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

השתמשו בכלי הדפדפן הזה כדי ליצור במהירות תמונות placeholder חד־פעמיות במהלך wireframing או prototyping בלי להוסיף תלותים לתהליך הבנייה. ליצירת placeholders דינמית בסביבת production (למשל, fallback לתמונות שהועלו על ידי משתמשים), השתמשו בתבניות SVG בצד השרת או בשירותים ייעודיים כמו plaiceholder שמשתלבים בצינור אופטימיזציית התמונות שלכם ויכולים ליצור placeholders מטושטשים באיכות נמוכה (LQIP) מתמונות אמיתיות.