כיצד לשים גרפיקה SVG על דף האינטרנט שלך

SVG או Scalable וקטור גרפיקה מאפשרים לך לצייר תמונות מורכבות הרבה יותר ויש להם אותם שניתנו על דפי אינטרנט. אבל אתה לא יכול פשוט לקחת את התגים SVG ו לסטור אותם לתוך ה- HTML שלך. הם לא יופיעו והדף שלך לא יהיה חוקי. במקום זאת, אתה צריך להשתמש באחת משלוש שיטות.

השתמש בתג אובייקט כדי שבץ SVG

תג ה- HTML ישלב גרף SVG בדף האינטרנט שלך. אתה כותב את תג האובייקט עם מאפיין נתונים כדי להגדיר את קובץ SVG שברצונך לפתוח. עליך לכלול גם תכונות רוחב וגובה כדי להגדיר את הרוחב והגובה של תמונת ה- SVG (בפיקסלים).

לתאימות בין דפדפנים, עליך לכלול את התכונה type, שאמורה להיות:

type = "image / svg + xml"

ו codebase עבור דפדפנים שאינם תומכים בו (Internet Explorer 8 ומטה). בסיס הקוד שלך יצביע על תוסף SVG עבור דפדפנים שאינם תומכים ב- SVG. התוסף הנפוץ ביותר הוא מ- Adobe בכתובת http://www.adobe.com/svg/viewer/install/. עם זאת, תוסף זה אינו נתמך עוד על ידי Adobe. אפשרות נוספת היא Ssrc SVG תוסף מ Savarese תוכנה מחקר ב http://www.savarese.com/software/svgplugin/.

האובייקט שלך ייראה כך:

עצות לשימוש באובייקט עבור SVG

  • ודא שהרוחב והגובה גדולים לפחות כמו התמונה שאתה מטביע. אחרת, התמונה שלך עשויה להיות מקוטעת.
  • ייתכן שה- SVG שלך אינו מוצג כראוי אם אינך כולל את סוג התוכן הנכון (type = "image / svg + xml"), לכן אני לא ממליץ להשאיר אותו.
  • ניתן לכלול מידע חזרה בתוך תג האובייקט עבור דפדפנים שלא יציגו קובצי SVG.
  • ניתן גם להגדיר את מקור ה- SVG וסוג התוכן בפרמטרים. זה עשוי לעבוד טוב יותר ב- IE 6 ו- 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

שים לב כי זה דורש Classid כדי לגרום לזה לעבוד.

הצג SVG בדוגמה של תג אובייקט.

שבץ SVG עם תג הטמע

אפשרות נוספת שיש לך לכלול SVG היא להשתמש בתג. אתה משתמש כמעט באותן תכונות כמו תג אובייקט, כולל רוחב <, גובה, סוג ובסיס נתונים>. ההבדל היחיד הוא שבמקום נתונים, אתה מציב את כתובת ה- SVG של מסמך SVG בתכונה src.

הטבעת שלך תיראה כך:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / צופה / להתקין "/>

עצות לשימוש ב- Embedded עבור SVG

  • תג ההטבעה אינו חוקי HTML4, אבל הוא חוקי HTML5, אז אם אתה משתמש בו בדף HTML4, אתה צריך לזכור כי הדף שלך לא יאמת.
  • השתמש בשם תחום quoalified במלואו במאפיין src לקבלת תאימות מיטבית.
  • יש גם כמה דיווחים כי באמצעות תג להטביע את תוסף Adobe יקרוס מוזילה גרסאות 1.0-1.4.

הצג SVG בדוגמה של תווית הטמעה.

השתמש ב- iframe כדי לכלול SVG

Iframes הן דרך קלה נוספת לכלול תמונת SVG בדפי האינטרנט שלך. זה דורש רק שלוש תכונות: רוחב וגובה כרגיל, ו- src מצביע על המיקום של קובץ SVG שלך.

ה- iframe שלך ​​ייראה כך: