ניתן ליצור מספר צורות באמצעות ציור SVG. ציור SVG יכול להשתמש ולשלב שבע צורות: נתיב, מלבן, מעגל, אליפסה, קו, פולין ומצולע.
נָתִיב
pathהאלמנט הוא הכי נפוץ לראות, ובדרך כלל נוצר על ידי תוכניות שנועדו יצוא קוד SVG.
הדוגמה pathלעיל תיצור סימבולית "פלוס" (+) כאשר משתמשים בה בציור SVG. pathאלמנטים SVG אינם בנויים באופן ידני, אלא נוצרים באמצעות תוכניות עיצוב שיכולות לתפעל גרפיקה וקטורית, כגון Illustrator או Inkscape.
מַלבֵּן
אלמנט המלבן rectמצייר מלבן על המסך והוא מקבל שש תכונות.
xו yלהקצות את העמדה בפינה השמאלית העליונה של המלבן, ו widthו heightלהקצות את גודל המלבן. rxו ryלהקצות את רדיוס הפינות המלבנות, בדומה נכס border-radius CSS.
מעגל
אלמנט המעגל circleמקבל שלוש תכונות.
cxו cyלהקצות את העמדה של מרכז המעגל, ואת rמקצה את הרדיוס (גודל) של המעגל.
אֶלִיפְּסָה
אלמנט האליפסה,, ellipseדומה circleלאלמנט למעט הרדיוס מחולק לשתי תכונות.
שוב, cxוגם cyלהקצות את העמדה במרכז האליפסה, ועכשיו rxו ryלהקצות את הרדיוס האופקי ואנכי של האליפסה, בהתאמה. גדול יותר rxייתן אליפסה "שמנה", וגדול יותר ryיתן אליפסה רזה יותר. אם rxו ryשווים, זה יהווה עיגול.
קַו
lineהאלמנט הוא פשוט, ומקבל ארבע תכונות.
x1ואת y1תכונות להקצות את הנקודה הראשונה של הקו, ואת x2ואת y2תכונות להקצות את הנקודה השנייה של הקו.
פולין
A polylineהיא סדרה של קווים ישרים מחוברים, המוקצים בתכונה אחת.
pointsהתכונה מקצה רשימה של נקודות, כל נקודה מופרדת באמצעות פסיק.
מְצוּלָע
polygonהאלמנט הוא גם סדרה של קווים ישרים מחוברים, אבל במקרה הזה, את השורה האחרונה באופן אוטומטי להתחבר מחדש אל נק' הראשונית.
דוגמה זו תשרטט את אותה צורה כמו polylineהאמור לעיל, אך היא תשרטט קו נוסף כדי "לסגור" את סדרת הקווים.
עוד מידע
תיעוד MDN: MDN