SVG Eğitimi

SVG eğitiminin özeti

• Hunor Márton Borbély tarafından hazırlanan bu SVG eğitiminde, temel şekillerden başlayıp karmaşık animasyonlara kadar SVG görsellerinin nasıl kodlanacağı adım adım öğrenilebiliyor.
• Temel şekiller çizme, Noel ağacı, zencefilli kurabiye adam ve ev yapımı gibi çeşitli konuları ele alırken; clip path, gradient, Bézier eğrileri ve metni bir yol boyunca çizme gibi SVG'nin farklı özelliklerini de tanıtıyor.
• Ayrıca JavaScript ile saat çizme, SVG öğelerine etkileşim ekleme ve JavaScript ile SVG diyagramları üretme gibi, SVG'yi diğer teknolojilerle birleştirme yöntemlerini de içeriyor.

GN⁺'ün görüşü

• Bu eğitim, SVG görsellerini kodlamayı öğrenmek isteyen başlangıç seviyesindeki yazılım mühendisleri için, temelden ileri tekniklere kadar sistemli biçimde ilerleyebilecekleri iyi bir kaynak.
• Özellikle gerçek zamanı gösteren bir saat yapma ya da SVG öğelerine etkileşim ekleme gibi pratik örnekler içermesi, öğrenenler için oldukça faydalı ve ilgi çekici bir deneyim sunacak gibi görünüyor.
• SVG öğrenmek isteyenler için bu eğitim, grafik odaklı web tasarımına dair anlayışı genişletebilecek ve web sayfalarına özgün görsel unsurlar ekleme becerisini geliştirebilecek çekici bir öğrenme kaynağı olabilir.

[GN⁺]

Hacker News görüşleri

• SVG ile React kombinasyonu hak ettiği değeri görmüyor. React’in tüm özelliklerinden ve soyutlamalarından yararlanabiliyorsunuz; DOM yerine keyfi grafikler render etmek de mümkün. Bunu grafik ve chart render etmek için kullandım ve bazı durumlarda Canvas’ı açık ara geride bırakıyor. Örneğin, basit etkileşim gerektiğinde ama piksel düzeyinde manipülasyon gibi karmaşık grafiklere ihtiyaç olmadığında çok kullanışlı.
• SVG esnek bir format ve ilgili eğitimlerle öğrenmek için zaman ayırmaya değer. React bileşenleriyle birleştirildiğinde, SVG kullanarak yalnızca HTML ile zor yapılabilecek etkileyici arayüzler oluşturabilirsiniz.
• React ile geliştirdiğim etkileşimli bir "Circle of Fifths" bileşenini müzik teorisi yan projemde kullanıyorum. Bileşen kullanılabilir durumda ve SVG ile Circle of Fifths oluşturma sürecini anlatan blog yazısı yardımcı oluyor.
• SVG’de <clip-path> kullanım örneğinde büyük çemberi iki kez tanımlamak verimsiz. Boyutu değiştirirken iki yeri de güncellemek gerekiyor; defs zaten kullanılıyorsa, çemberi bir kez tanımlayıp yeniden kullanmak daha iyi.
• SVG ve React ile inline SVG kodlamak eğlenceli; ayrıca <foreignObject> etiketi sayesinde SVG’yi HTML içinde kullanabiliyorsunuz. Bu da HTML’in daha iyi yaptığı işler için faydalı oluyor: bağlantılar, görseller, temel flexbox stillendirmesi gibi.
• Birkaç yıl önce, bir arayüz üzerinde çalışırken SVG kullandığımda, iki renk şeması için yalnızca SVG dosyasındaki renk kodlarını bulup değiştirerek tasarımcıyı şaşırtmıştım.
• Eğitimle ilgili olumlu geri bildirimler için teşekkür ediyor ve bulunan hataları düzelttiğini söylüyor. Hâlâ ince ayar yapıyor; örneğin Twitter’da küçük görsel önizlemesinin neden çalışmadığını bilen olup olmadığını merak ediyor.
• SVG "tag" terimiyle ilgili küçük bir rahatsızlığım var. HTML’e ilk başladığımda her şeye "tag" derdim ama XHTML çıktıktan sonra buna "element" demeye başladım. Hâlâ içimden "tag" diye düşünüyorum ama artık "element" diyorum.
• Eğriler ve clipping ile ilgili örnekleri özellikle beğendim. path tercih ediyorum; çünkü onunla neredeyse her şeyi yapabiliyorsunuz ve diğer yöntemlere göre daha az ayrıntılı. Çizim yapmada kötüyüm ve görsellerden hoşlanmıyorum, bu yüzden performans ve kullanım kolaylığı için tüm yan projemi SVG ile kurdum. Bu eğitim sayesinde refactor etmem gereken çok yer olduğunu fark ettim.
• Metin ve görselleri birlikte kullanan bir örnek görmek isterdim. Şu anda bu konuyla uğraşıyorum ve hizalama zor bir mesele. Inkscape kullanmayı denedim ama ihtiyacım olan şeyi üretmek için XML yazma tarafına daha yakınım.
• SVG’yi doğrudan kodlamak yaygın bir pratik mi, yoksa örneğin Figma’da çizip SVG dosyası üretmek mi daha yaygın, merak ediyorum.