הטמעת תמונות וגופנים ב־SVG
הוסף SVG אחד ואת התמונות (PNG, JPEG, WebP, GIF) או הגופנים (TTF, OTF, WOFF, WOFF2) שהוא מפנה אליהם, וחבר אותם ל־SVG אחד כדי שלא תצטרך לשתף את הנכסים בנפרד. ציין את הנכס שישמש כל הפניה וצור את ה־SVG. ניתן לשמור אותו לאחר שהתצוגה המקדימית תוצג בהצלחה. נכסים ב־URL חיצוניים אינם נאחזרים אוטומטית.
מה אפשר לעשות
לארוז תמונות וגופנים
להטמיע נכסים מקומיים שנוספו לתוך ה-SVG כדי להקטין את הצורך לשלוח נכסים בנפרד.
לבדוק הפניות ונכסים
לציין את הקובץ המתאים לכל נתיב תמונה או שם גופן ב-SVG. ה-SVG אינו נוצר כאשר נותרו הפניות שלא נפתרו.
לבדוק את תצוגת ה-SVG שנוצר ולשמור
לבדוק כיצד הוא מוצג כתמונה ולשמור את ה-SVG עם הנכסים המוטמעים. הקבצים המקוריים אינם נדרסים.
איך להשתמש
להוסיף SVG ונכסים
בחרו SVG אחד ואת התמונות והגופנים שהוא מפנה אליהם. אפשר גם להוסיף אותם יחד מתיקייה.
למפות את הנכסים להטמעה
בדקו איזה קובץ מקומי להשתמש עבור כל הפניה. עבור הפניות שלא הותאמו אוטומטית, בחרו מבין הנכסים שכבר נוספו.
ליצור את ה-SVG
כאשר אין עוד הפניות שלא נפתרו, לחצו על «צור SVG עם תמונות וגופנים».
לבדוק את התצוגה ולשמור
בדקו את הטקסט ואת התמונות בתצוגה המקדימה שנוצרה לפני השמירה. אם התצוגה נכשלת, בדקו את ה-SVG ואת הנכסים המקוריים.
שימושי כאשר
למסור את ה-SVG ואת הנכסים יחד
למזג גרפיקה שמפנה לתמונות וגופנים בתיקיות נפרדות ל-SVG אחד קל למסירה.
לבדוק את הגורם להפניות שבורות
להשוות בין הנכסים הנדרשים לבין הקבצים שנוספו, ואז לציין כל תמונה או גופן חסר.
איך הפניות והטמעה עובדים
נתיבים יחסיים והתאמת קבצים
הפניות מתאימות אוטומטית כאשר נתיב הפניה יחסי ל-SVG תואם באופן ייחודי לנתיב של נכס שנוסף. יש לבחור ידנית כאשר קבצים בעלי שם זהה נמצאים בתיקיות שונות או שהמועמדים חופפים.
לציין את הקובץ עבור כל שם גופן
הכלי אינו מחלץ גופנים מהמכשיר שלכם רק לפי שמות הגופנים שב-SVG. יש להוסיף את קובצי הגופן הנדרשים ולציין את הקבצים המתאימים.
נכסים בכתובות URL אינם נשלפים אוטומטית
גם כאשר יש הפניה לכתובת URL חיצונית, יש לספק את התמונות או הגופנים מקומית ולציינם. במסך הזה אין פעולה לשליפת נכסים מכתובות URL.
הטמעה שונה מהקטנת גודל הקובץ
הוספת נתוני תמונה לתוך ה-SVG עלולה להגדיל את גודל קובץ ה-SVG עצמו. גופנים מומרים ל-WOFF2 ומוטמעים. יש לבצע אופטימיזציה של קוד SVG בכלי נפרד.
הבדלים לפי אופן התצוגה
התצוגה המקדימה מציגה את ה-SVG כתמונה. לא ניתן להבטיח מראה זהה בכל אפליקציה, לכן כדאי לבדוק גם את התצוגה הנדרשת ביעד.
שאלות נפוצות
מה לעשות אם לא ניתן למצוא נכס?
הוסיפו תמונות או גופנים, ואז ציינו אותם בשדה הבחירה עבור ההפניה המתאימה. התאמה אוטומטית עלולה שלא לעבוד עם תיקיות שונות, נתיבים כפולים או כתובות URL חיצוניות.
אילו נכסים אפשר להשתמש בהם?
תמונות יכולות להיות PNG, JPEG, WebP או GIF; גופנים יכולים להיות TTF, OTF, WOFF או WOFF2. יש לציין SVGs אחד בכל פעם.
האם הוא מוצא גופנים אוטומטית?
הכלי אינו מחפש במכשיר שלכם או באינטרנט גופנים רק לפי שם גופן. הוסיפו ובחרו קובץ שיש לכם מקומית.
מה קורה לנכסים שכבר מוטמעים?
תמונות וגופנים המוטמעים כ-data URI, והפניות # בתוך ה-SVG, אינם נחשבים הפניות חיצוניות. ניתן ליצור את ה-SVG אם לא נותרו הפניות שזוהו ולא נפתרו.
מה קורה כשמוסיפים או בוחרים מחדש נכסים?
אם מוסיפים רק נכסים, הם נוספים לרשימה והנכסים שהוקצו קודם נשמרים. בדקו את ההתאמה האוטומטית אם נוספו מועמדים נוספים באותו נתיב, למשל. קלט שכולל SVG חדש מחליף את ה-SVG הנוכחי ואת כל נכסיו.
מה אם יש הפניות שאינן נתמכות?
לא ניתן להטמיע הפניות use או script חיצוניות. גם SVGs המכילים ייבוא של CSS חיצוני אינם ניתנים לטעינה. יש לסדר את ההפניות באפליקציה המקורית או באפליקציה מתאימה אחרת לפני בחירת ה-SVG.
האם ה-SVG יהיה קטן יותר?
הקטנת גודל הקובץ אינה מטרת הכלי. הוספת נכסים לתוך ה-SVG עלולה להגדיל אותו. אם רוצים לנקות את הקוד, יש להשתמש באופטימיזציה של SVG.
מה אם ה-SVG שנוצר אינו מוצג?
אפשרות השמירה לא מוצגת במסך הזה עד שה-SVG מוצג בהצלחה. בדקו את ה-SVG ואת הנכסים המקוריים, סקרו את המיפויים או הקבצים, וצרו אותו שוב.
קלט ותוצאות
- קלט
- SVG אחד בתוספת תמונות וגופנים. אפשר להוסיף מקבצים או מתיקיות.
- תמונות
- הנתונים המקוריים של התמונות שנוספו מוטמעים. התמונות אינן משונבות או נדחסות.
- גופנים
- גופנים ממופים מומרים ל-WOFF2 ומוטמעים.
- פלט
- original-name-embedded.svg. אפשר לשמור לאחר שה-SVG שנוצר מוצג בהצלחה.