גרפיקה וקטורית ב- HTML5 באמצעות SVG ו- InkScape

20/04/2012

תגיות: , , , , ,
תגובה אחת
גרפיקה וקטורית היא גרפיקה המבוססת על אוסף של וקטורים המייצגים יחד אלמנטים גרפיים בתמונה. כל אלמנט בתמונה מאופיין על ידי נקודות וקווים העוברים ביניהן. בניגוד לגרפיקת מפת סיביות – Bitmap – המבוססת על מטריצה של פיקסלים (jpg, gif, png…), גרפיקה וקטורית מאפשרת שינוי גודל התמונה מבלי לפגוע באיכות שלה.
Scalable Vector Graphics  – SVG – היא שפה המאפשרת לתאר באמצעות XML גרפיקה וקטורית דו-מימדית סטטית או דינמית. ה- W3C (הארגון הבינלאומי האחראי לתקנים באינטרנט) החל את פיתוח תקן SVG כבר בשנת 1999. תקן SVG 1.0 הומלץ לשימוש ע"י ה- W3C כבר בשנת 2001. תקן SVG 2.0 יומלץ לשימוש, ככל הנראה, רק בסוף שנת 2013 (מצב עכשווי, Roadmap).
התמונה הבאה (הלקוחה מאתר Wikimedia, בו מרבית התמונות המקוריות שמורות בפורמט SVG), ממחישה את ההבדל בין גרפיקת SVG לגרפיקת Bitmap. אם תלחצו על התמונה תוכלו לראות את קובץ ה- SVG המקורי בדפדפן. ואם לאחר מכן תציגו את מקור הדף (View Source) תראו שמאחורי הקלעים מדובר בקוד XML לכל דבר.
גרפיקה וקטורית VS תמונת מפת סיביות
שפת HTML5 מאפשרת שילוב אינטגרלי של שפת SVG. כך שניתן לשלב גרפיקה וקטורית מסוג SVG בתוך דפי ה- HTML כאלטרנטיבה לפלאש ול- Canvas של HTML5 (השוואה בין Canvas ל- SVG).
התמיכה בהצגת תוכן SVG קיימת בכל הדפדפנים מהשנים האחרונות, כולל Internet Explorer מגירסה 9 ואילך (טבלת תמיכה מלאה ).
בניגוד ל-Canvas של HTML5 המורכב מתגית HTML אחת הנקראת canvas וכל הציור והמניפולציה מתבצעים באופן תיכנותי בלבד עם API בג'אווה סקריפט, הציור ב- SVG יכול להתבצע באמצעות תגיות ותכונות XML בלבד ללא תיכנות. כמובן שגם ל- SVG קיים API המאפשר באמצעות תיכנות לבצע מניפולציות באופן דינמי ואנימציה על הגרפיקה.
דוגמא פשוטה לשילוב של קוד SVG בדף HTML5 המציג עיגול באמצעות תגית circle:<!DOCTYPE html>
<
html
>
<
head>
<title>SVG Example</title
>
</
head
>
<
body>
<h1>Drawing SVG Circle</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="120" cy="40" r="50" stroke="green"
stroke-width="5" fill="yellow" />
</svg
>
</
body
>
</
html
>

הפלט:
SVG-Circle
מדריך מלא לשפת SVG תוכלו למצוא באתר:    http://www.w3schools.com/svg
תוכנת InkScape היא תוכנת קוד-פתוח, חופשית וחוצה-פלטפורמות המאפשרת יצירה ועיבוד של גרפיקה וקטורית. היא מאפשרת גם יבוא של תמונות בפורמטים רגילים והמרתן לאובייקטים וקטורים.
linkScape
InkScape מאפשרת שמירה של התמונה הסופית למגוון מאוד רחב של פורמטים שונים  – Microsoft XAML ,Acrobat PDF, PNG (מצויין למפתחי WPF/Silverlight), מגוון של פורמטים מסוג SVG (כולל פורמטים דחוסים וקומפקטיים) ועוד.
מהאתר inkscape.org/download ניתן להוריד את התוכנה – היא חינמית וקיימת במגוון של גירסאות למערכות הפעלה שונות ואף גירסת Portable שאינה דורשת התקנה.

  • ספר אינטרנטי – InkScape למתחילים – באתר wikibooks:

http://en.wikibooks.org/wiki/Inkscape

  • רשימת מדריכים (tutorials) להכנת תמונות SVG באמצעות InkScape:

http://inkscapetutorials.wordpress.com/suggest-a-tutorial/tutorial-list

  • גלריות של תמונות SVG שנעשו באמצעות InkScape:

http://wiki.inkscape.org/wiki/index.php/Galleries

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

תגובה אחת