מבט לתוך גרפיקה וקטורית Scalable (SVG)

גרפיקה וקטורית יושמה באופן נרחב בתקשורת הכתובה. באתר אינטרנט, אנו יכולים גם להוסיף גרפיקה וקטורית עם SVG או Scalable וקטור גרפי. מתוך המפרט הרשמי ב- W3.org, SVG מתואר כ:

שפה לתיאור גרפיקה דו-ממדית ב- XML. SVG מאפשר שלושה סוגים של אובייקטים ßgraphic: צורות גרפיות וקטוריות (למשל, נתיבים המורכבים מקווים ישרים ועיקולים), תמונות וטקסט.

זה היה למעשה סביב מאז 1999, נכון ל 16 אוגוסט 2011, הוא הפך המלצה W3C. עם זאת, SVG עדיין underused במידה ניכרת, ואילו יש הרבה יתרונות באמצעות וקטור במקום bitmap לשרת גרפיקה או תמונה באתר אינטרנט.

יתרונות SVG

בטווח ההגשה של גרפיקה באתרים, SVG מציעה מספר יתרונות על פני Bitmap, שחלקם כוללים:

החלטה עצמאית

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

צמצום בקשת HTTP

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

עיצוב וסקריפטים

הטמעה ישירה עם svg תג יאפשר לנו גם לסגנון את הגרפיקה בקלות באמצעות CSS. אנחנו יכולים שינוי מאפייני אובייקט כגון צבע רקע, אטימות, גבולות וכו 'באותו אופן שאנחנו עושים עם תג HTML רגיל. באופן דומה, אנו יכולים גם לתפעל את הגרפיקה באמצעות JavaScript.

יכול להיות אנימציה וערוך

אובייקט SVG יכול להיות אנימציה כאשר הוא משתמש אלמנט אנימציה או באמצעות JavaScript ספריית כמו jQuery. אובייקט SVG ניתן גם לערוך עם כל עורך טקסט או תוכנה גרפית כמו Inkscape (שהוא בחינם) או Adobe Illustrator.

גודל קובץ קטן יותר

ל- SVG יש גודל קובץ קטן יותר בהשוואה ל- Bitmap, המציג מצגת גרפית דומה.

ציור צורות בסיסיות עם SVG

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

קו

לצייר קו ב SVG אנחנו יכולים להשתמש אלמנט. אלמנט זה משמש לצייר קו ישר אחד, כך שזה יהיה רק ​​מורכב משתי נקודות, להתחיל ו ח.

כפי שניתן לראות לעיל, נקודת ההתחלה של נקודת ההתחלה באה לידי ביטוי בשתי התכונות הראשונות x1 ו x2, בעוד קואורדינטות נקודת הקצה של הקו באה לידי ביטוי עם y1 ו y2.

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

זה בסופו של דבר פשוט עושה את אותו הדבר.

• הצג הדגמה “קו”

פוליין

זה כמעט דומה ל , אבל עם אלמנט אנחנו יכולים לצייר שורות מרובות במקום רק אחד. הנה דוגמה:

רכיב has נקודות תכונות המאחסנות את כל הקואורדינטות היוצרות את השורות.

• הצג הדגמה “פוליין”

מלבן

ציור מלבן הוא גם פשוט עם זה אלמנט. אנחנו רק צריכים לציין את רוחב וגובה, כך:

• הצג הדגמה “מלבן”

מעגל

אנחנו יכולים גם לצייר עיגול עם אלמנט. בדוגמה הבאה, ניצור מעגל עם 100 רדיוס אשר מוגדר עם ייצור תכונה:

שתי התכונות הראשונות, cx ו cy מגדירים את הקואורדינטות של המעגל. בדוגמה לעיל, יש לנו להגדיר 102 הן עבור איקס ו y לתאם, אם תכונות אלה לא צוין, 0 יילקח כערך ברירת המחדל.

• הצג הדגמה “מעגל”

אליפסה

אנחנו יכולים לצייר אליפסה עם . זה עובד די דומה למעגל, אבל הפעם אנחנו יכולים לשלוט במיוחד איקס רדיוס קו y רדיוס קו עם rx ו ry מאפיינים

• הצג הדגמה “אליפסה”

מצולע

עם ה אלמנט, אנו יכולים לצייר צדדים מרובים של צורות כמו משולש, משושה ואפילו מלבן. הנה דוגמה:

• הצג הדגמה “מצולע”

באמצעות עורך גרפי וקטור

כפי שאתה יכול לראות, ציור אובייקטים פשוטים עם SVG ב- HTML הוא די קל. עם זאת, כאשר האובייקט מקבל יותר מורכבים, בפועל זה כבר לא אידיאלי ייתן לך כאב ראש.

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

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

לחלופין, ניתן גם להטביע את .svg קובץ באמצעות אחד המרכיבים האלה; להטביע, iframe ו אובייקט, לדוגמה;

התוצאות יהיו בסופו של דבר זהה.

בדוגמה זו, אני משתמש ב- iPod זה מ- OpenClipArt.org.

• הצג הדגמה “iPod”

תמיכה בדפדפן

בנוגע לתמיכה בדפדפן, SVG נתמך היטב בכל הדפדפנים העיקריים, למעט ב- IE8 ובמוקדם יותר. אבל העניין הזה ניתן לפתור עם ספריית JavaScript הזאת, הנקראת Raphael.js. כדי להפוך את הדברים לקלים יותר נשתמש בכלי זה, ReadySetRaphael.com כדי להמיר את קוד SVG שלנו לתבנית הנתמכת על ידי Raphael. הנה איך.

קודם כל, להוריד ולכלול את רפאל הספרייה למסמך ה- HTML שלך. לאחר מכן, העלה את .svg קובץ לאתר, להעתיק ולהדביק את קוד שנוצר בתוך העומס הבא פונקציה;

 window.onload = function () / קוד רפאל הולך כאן 

בתוך ה הגוף תג, שים את הדברים הבאים div עם rsr תכונה מזהה;

זהו זה, סיימת. בדוק את הדוגמה מהקישור שבהמשך.

• הצג הדגמה “רפאל”

סופי מחשבות

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

כמו תמיד, אם אתה אדם הרפתקני, כאן יש לנו לשים עוד כמה הפניות ודיון לחפור עמוק יותר לתוך הנושא הזה.

• מבוא ל - SVG - W3 בתי ספר
• רזולוציה עצמאית עם SVG - Smashing מגזין
• למה אתה לא משתמש SVG? - NetTuts

תודה על הקריאה ואנו מקווים שנהנית מהודעה זו.

• הצג הדגמה
• הורד מקור