Oluşturduğumuz SVG'nin genişliği 32px yüksekliği 96px'dir. viewBox'ı 0 0 200 600'a ayarladık. Böylece x ekseni 0-200, y ekseni 0-600 koordinatlarını kullanmış olacağız.
İki tane temel element bulunmaktadır. path element'i ve circle element'i. circle sol anahtarının ucundaki daire'yi çizmek için kullanılıyor. Asıl çizimi path element'i ile yapıyoruz. Path elementi verilen noktalara göre çizgi çizmektedir. Örneğin bir line
şeklinde çizilebilir. d="M10,10 100,100", 10,10 noktasından 100,100 noktasına çizgi çiz anlamına gelmektedir. M(move) kelimesinin baş harfidir. M ile path çizimi başlatılır. Son koordinat ise path'in kapatılma koordinatıdır.
Sol anahtarı düz çizgiler ile çizilemez. path'imiz eğri çizlmesi gerekir. Bunun için SVG Bezier eğrilerini destekler. Bezier eğrilerinde başlangıç ve bitiş noktası verilir. Bununla birlikte kontrol noktaları verilir. Bu kontrol noktalarına göre düz çizgi eğrileştirilir. Kontrol noktalarını düz a noktasından b noktasına düz gitmek isteyen bir insanı çeken insanlar olarak düşünebilirsiniz. Kontrol noktalarından çekildiği için a noktasından b noktasına düz çizgi olarak değil eğri bir şekilde gider. Sol anahtarının path'i aşağıdaki gibidir
M ile önce 50,400 noktasına gelinir. C50,300 180,300 180,400 ile 50,400 noktasından 180,400 noktasına çizilir ve 50,300 180,300 kontrol noktalarıdır. C180,550 0,550 10,400 ile de kalınan son noktadan 10,400 noktasına hareket edilir. 180,550 0,550 kontrol noktalarıdır. S200,20 100,20 ise kalınan noktadan 100,20'e hareket eder ve tek kontrol noktası vardır. Aynı şekilde S50,200 100,430 ve S30,580 0,550 ile path tamamlanır.
Bu konuda w3.org'taki SVG Specification'a bakabilirsiniz. http://www.w3.org/TR/SVG11/paths.html adresinde path'ler ile ilgili ayrıntılı bilgi bulabilirsiniz.
