26 באוק׳ 2012

SVG - שימוש בתמונות וקטוריות (vector images) במקום תמונות רגילות

 SVG - Vector Images - CSS3
עם כניסת  ה HTML5 ו CSS3, נוספה האופציה לעבודה עם תמונות וקטוריות. התקן המקובל לשימוש בתמונות וקטוריות בדפדפנים הוא מסוג SVG (פרוש "Scalable Vector Graphics").

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

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



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

לצורך הדוגמא הכנתי תמונת SVG של סמיילי, ובנוסף את אותה תמונה במצב רגיל (PNG).
כדי להבין את היתרונות והחסרונות של שימוש בתמונה וקטורית, ראה תמונה ממחישה מה קורה שמגדילים תמונה רגילה, ומה קורה שמגדילים תמונה וקטורית.


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

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

קוד התוכן של תמונה וקטורית שונה מקוד תמונה רגילה(שלא ניתן לקריאה אנושית), הוא סוג של קובץ מסוג XML, וניתן להבנה לקריאה.
לדוגמא, תוכן קובץ הסמיילי מסוג SVG נראה כך:
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <marker id="se_marker_start_svg_6" markerUnits="strokeWidth" orient="auto" viewBox="0 0 100 100" markerWidth="5" markerHeight="5" refX="50" refY="50">
   <path id="svg_10" d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#000000" stroke="#000000" stroke-width="10"/>
  </marker>
  <marker id="se_marker_end_svg_6" markerUnits="strokeWidth" orient="auto" viewBox="0 0 100 100" markerWidth="5" markerHeight="5" refX="50" refY="50">
   <path id="svg_11" d="m100,50l-100,40l30,-40l-30,-40l100,40z" fill="#000000" stroke="#000000" stroke-width="10"/>
  </marker>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse fill="#ffffff" stroke="#000000" stroke-width="5" cx="151" cy="149" id="svg_1" rx="141" ry="141"/>
  <ellipse fill="#ffffff" stroke="#000000" stroke-width="5" cx="100" cy="96" id="svg_3" rx="28" ry="28"/>
  <ellipse fill="#ffffff" stroke="#000000" stroke-width="5" cx="209" cy="94" id="svg_5" rx="27" ry="27"/>
  <polyline points="227.5,211 151,211 74.5,211 " stroke="#000000" stroke-width="5" fill="none" marker-start="url(#se_marker_start_svg_6)" marker-end="url(#se_marker_end_svg_6)" id="svg_6"/>
  <ellipse fill="#00007f" stroke="#000000" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" cx="98" cy="103" id="svg_7" rx="11" ry="11"/>
  <ellipse fill="#00007f" stroke="#000000" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" cx="206" cy="98" id="svg_9" rx="11" ry="11"/>
 </g>
</svg>


אתם מוזמנים להעתיק את התוכן הXMLי (יש לשמור עם סיומת SVG) או להוריד את התמונות בשני הפורמטים בלינק הזה.

לתמונת SVG, יש גודל ברירת מחדל שמצוין בשורה הראשונה בקובץ. הגדלים האלו, נועדו רק ליחסים של שאר האלמנטים המצויים בתוך קובץ ה SVG.
כאשר משתמשים בתמונת SVG ולא מציינים גודל, אז הערך של התמונה יקבל את הגדלים שנמצאים ברירת מחדל בתוך קובץ ה SVG.
syntax הגדלים (ברירת מחדל) בתוך קובץ ה SVG
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">

הטמעת תמונות מסוג SVG

ישנם שני אופציות להטמעת תמונות, האחת כתמונה רגילה, והשנייה כתמונת רקע.
1. מימוש כתמונה רגילה
syntax
<img  src="images/smiley.svg" />
גודל התמונה יהיה 300 על 300 פיקסלים, כי זה היה הגדרת הבסיס שלי בזמן היצירה של קובץ ה SVG.
במידה ואני רוצה את התמונה יותר קטנה או יותר גדולה אני פשוט יכול לתת מידות לתמונה.
לדוגמא
<img  src="images/smiley.svg" height="450" width="450" />
או
<img  src="images/smiley.svg" height="50" width="50" />
וכמובן כמו שציינתי התמונה שומרת על האיכות שלה, לא משנה איזה גודל אני יקבע.

2. מימוש כתמונת רקע. במימוש כתמונת רקע נצטרך לתת מידות לאלמנט על מנת שיקבל נפח (width + height), ובנוסף נשתמש ב property מסוג background-size, שמטרתו להגיד לנו באיזה מימדים אנחנו רוצים את תמונת הרקע שלנו, וע"י כך לעשות מתיחה לתמונה. 
חשוב לציין! -  background-size קיים החל מCSS3 ויכול לשמש לכל סוג של תמונה.
syntax HTML
<div class="smiley"></div>
syntax CSS
.smiley{
      background-image: url(images/smiley.svg);
      background-repeat: no-repeat;
      background-size: 512px 512px;            
      width: 512px;
      height: 512px;
}


בגדול זה הוא כל תורת המימוש, של איך להשתמש בקבצי SVG חיצוניים.
השימוש בתמונות SVG מומלץ לתמונות שלא מרובות צבעים כמו לוגואים. בדוגמא שהכנתי גודל תמונת ה SVG הוא פחות מ 1K לעומת התמונה הרגילה ששוקלת 5K.
התמיכה ב SVG, קיימת בכל הדפדפנים, החיסרון היחידי שבאקספלורר היא קיימת רק מגרסה 9.

תמיכה אחרונית ע"י שימוש בספריית Modernizr (לפוסט על ספריית Modernizr)

על מנת ליצור תמיכה לאקספלורר 7 ו8, נציג תמונת רקע מסוג רגיל כגון PNG, במקום.
syntax CSS
.no-svg .smiley{background-image: url(../images/smiley.png);}

לאנשים שמשתמשים בספריית less, ניתן ליצור כתיבה שתקשר בין שני קטעי ה CSS (לפוסט על ספריית less)

syntax CSS

.smiley{
      background-image: url(images/smiley.svg);
      background-repeat: no-repeat;
      background-size: 512px 512px;            
      width: 512px;
      height: 512px;
     & .no-svg {background-image:url(../images/t/smiley.png);}
}

צורת הכתיבה הזאת יוצרת את אותו קוד CSS, אך מראה שיש קשר בין class האבא no-svg, לclass ה smiley.


צירפתי לינקים לפוסטים נוספים שקשורים לפוסט זה:


חומרים נוספים על SVG

  • בנוסף לצורך האימון אתם מוזמנים להשתמש בכלי החינמי על מנת ליצור קבצי SVG - עורך SVG.
  • חומר על תקן SVG באתר W3C
זהוא! מקווה שנהניתם, ואשמח שתטקבקו, במידה ואתם אוהבים את ה tutorials שאני כותב, אשמח שתצטרפו לרשימת הקוראים של בפייסבוק ע"י לחיצה על לייק כאן

תודה,
אלעד שכטר