SVG Eğitimi

 (svg-tutorial.com)
6 puan yazan GN⁺ 2023-12-08 | 1 yorum | WhatsApp'ta paylaş
  • HTML içinde görselleri doğrudan kodla çizmeye yönelik bir SVG öğrenme kaynağı; temel şekillerden etkileşime kadar adım adım takip edilebiliyor
  • Öğrenme akışı, viewBox, polygon, polyline gibi temel öğelerden path, Bézier eğrileri ve arc yapısına doğru genişliyor
  • Dönüşüm bölümü döndürme, taşıma, yeniden kullanım, ölçekleme ve genel dönüşümleri ele alırken; CSS bölümü animasyon, hover, yol tabanlı animasyon ve CSS içinde inline SVG kullanımını kapsıyor
  • İleri konularda metin, clip-path, gradyanlar işleniyor; JavaScript ile gerçek zamanı gösteren saat, etkileşim, veri odaklı diyagram ve çoklu bileşenlere ayırma pratikleri yapılıyor
  • line, circle, rect, polyline, polygon, text ile quadratic/cubic Bézier curve ve arc için editör bağlantıları da sunuluyor; böylece her öğe doğrudan denenebiliyor

Eğitim içeriği

Uygulama için SVG öğeleri ve path segmentleri

İlgili okumalar

1 yorum

 
GN⁺ 2023-12-08
Hacker News yorumları

  • SVG + React kombinasyonu hafife alınıyor. React’in soyutlamasını ve gücünü aynen kullanırken DOM yerine keyfî grafikler render edebiliyorsunuz; grafik veya chart render etme gibi bazı kullanım alanlarında Canvas’tan çok daha iyi olduğunu düşünüyorum.
    Piksel düzeyinde müdahale gibi grafiksel olarak karmaşık bir şeye ihtiyacınız yoksa ve yalnızca biraz etkileşim gerekiyorsa özellikle iyi. Canvas’ta hover efekti yapmak için farenin hangi öğenin üzerinde olduğunu kendiniz hesaplamanız gerekir, bu da zahmetli; SVG’de ise onmouseover gibi yerleşik özellikleri kullanabilirsiniz.

    • Evet. SVG’ye tıklama listener’ı ekleyebilmek ve CSS ile normal HTML gibi stillendirebilmek bazen sihir gibi geliyor; React / JSX de bunu kullanmayı kolaylaştırıyor.
    • Bu konu için iyi bir başlangıç kaynağı var mı? React’te de neredeyse acemi seviyesindeyim ama epey eğlenerek derinleşebileceğim bir şey gibi görünüyor.
      Yön gösterecek veya ilham verecek çalışan örnekler olsa güzel olurdu.
    • İstemci tarafı için Preact.js ve SVG kullanarak görüntü bölme + etiketleme bileşeni yapmıştım; oldukça iyi sonuç verdi. Bu tür uygulamalar için tavsiye edebilirim.
    • Evet. HTML Canvas’ın çok daha performanslı olduğu durumlar da çok ama bir sonraki Figma’yı yapmayacaksanız SVG ile çalışmak çok daha rahat.
    • GlowForge ile kesilecek desenleri React & SVG ile kodluyorum; gayet iyi çalışıyor.

  • Genel olarak harika bir kaynak ve örnekler gerçekten çok net. Ancak clip-path bölümünde önerilen kod büyük daireyi iki kez tanımlıyor; dairenin boyutunu değiştirmek için iki yeri düzenlemek gerekiyor.
    Zaten defs kullanıldığına göre, aynı tanımı yeniden kullanacak şekilde yazmanın daha iyi olduğunu düşünüyorum.

    • İkinci öğeye de gerek yok; daireyi normal şekilde render edip sonra clipPath içinde referanslamak yeterli.
      Kişisel olarak <g> ile sarmalamayı da çıkarmak isterdim. Böyle bir yapının neden önerildiğini hiç anlamadım; <defs> içinde değilse render edilecek öğeleri koymak isteyeceğiniz çok nadir durumlar dışında bir kazancı yok gibi görünüyor. Örnekteki defs/circle gibi durumlarda genelde <symbol> kullanmak doğru olur.
    • Doğru ve iyi bir fikir. Bununla ilgili bir not ekleyebilirim.

  • Gerçekten harika. SVG temiz ve esnek bir format; devam eden yan projemle doğrudan ilgili olduğu için bu öğreticiyi zaman ayırıp takip etmeyi düşünüyorum.
    Diğerleri gibi SVG tabanlı React bileşenleri yapmak bana da oldukça eğlenceli geldi. React ve JSX etkileşim eklemeyi kolaylaştırıyor; SVG ise yalnızca HTML ile kolayca yapılamayacak arayüzleri mümkün kılıyor.
    Müzik teorisi yan projem için etkileşimli bir Circle of Fifths render eden React bileşenini yayımlamıştım. Hâlâ yapılacak çok iş var ama kullanılabilir durumda: https://github.com/epiccoleman/react-circle-of-fifths
    SVG ile Circle of Fifths yapma sürecini anlatan bir yazı da yazdım; karmaşık öğeleri çizme sürecini adım adım izleyen ara açıklama kısmını özellikle seviyorum: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    Şimdi benzer bir yaklaşımla fretboard diyagramı oluşturucu yapıyorum; eski yazıya tekrar başvuru kaynağı olarak bakabilmek faydalı oluyor. Çalışmayı yazıya dökmenin güzel yanı, bir problemi nasıl çözdüğünüzü “yeniden oynatabilmek”.

  • Bu kaynağı beğendim. React’te birkaç inline SVG yapıp etkileşim ekledim; kurcalaması gerçekten çok eğlenceli.
    Özellikle <foreignObject> etiketi kullanışlı. SVG içine normal HTML koyabiliyorsunuz; böylece bağlantılar, görseller, temel flexbox stillendirmesi gibi HTML’in daha iyi yaptığı işleri SVG sanat projesinin içinde halledebiliyorsunuz.
    Yazara ek olarak: sitedeki bazı bağlantılar çalışmıyor. Sayfanın altındaki bio.link ve Day 11 “How to Draw Quadratic Bézier Curves with SVG” içindeki etkileşimli Bézier eğrisi demosu bağlantısı kapalı.

    • Etkileşimli demo bağlantısını düzelttim. O site muhtemelen Vue ile yapıldığı için derin bağlantılar her zaman iyi çalışmıyor gibi görünüyor.
      bio.link tarafında bir sorun göremiyorum; hangi hatayı gördüğünü merak ettim.
    • https://svg-tutorial.com/svg/transform sayfasının altındaki “next example” bağlantısı da /svg/path olarak verilmiş, 404 veriyor; doğru bağlantı /svg/use gibi görünüyor.
    • Bir şeyler her zaman bozuk oluyor. Kontrol edeceğim.
      foreignObject’i ben de bilmiyordum, gerçekten güzelmiş.

  • Birkaç yıl önce arayüz üzerinde çalışırken grafiklerin bir kısmında SVG kullanıyordum. İki renk şeması vardı ama grafiklerden biri yalnızca bir şemadaydı; bu yüzden diğer rengin hex kodunu almak için koridorun karşısına gittim.
    Tasarımcının SVG dosyasını açıp ikinci rengi oluşturmak için yalnızca tüm renkleri bulup değiştirdiğini görünce çok şaşırmıştım.

    • Bunu hiç düşünmemiştim. Bir gün çok zaman kazandırabilecek harika bir ipucu.
    • İlginç; “diğer rengin hex kodunu almak için koridorun karşısına gittim” kısmını biraz daha açıklayabilir misin?

  • Harika. Özellikle hâlâ zorlandığım eğriler ve clipping örneklerini beğendim.
    Kişisel olarak neredeyse her şeyi yapabilen ve diğer yöntemlerden daha az laf kalabalığı olan path’i tercih ediyorum.
    Uzun zamandır öğreniyorum ama hâlâ öğrenecek çok şeyim olduğunu hissediyorum. Çizimde gerçekten kötüyüm ve görselleri de pek sevmiyorum; bu yüzden kolaylık ve performans için yan projemin tamamını SVG ile yaptım.
    Bugünkü kaynağı gördükten sonra epey refactor etmem gerekecek gibi: https://eddiots.com/1

    • Yardımcı olduysa sevindim. Çizgi roman da harika.

  • İyi geri bildirimler için teşekkürler; bulunan birkaç hatayı düzelttim. Hâlâ çalışmayan bir şey varsa haber verirseniz sevinirim. Hâlâ biraz son rötuş aşamasındayım
    Örneğin Twitter’da küçük resim önizlemesinin neden çalışmadığını bilen var mı? Alt sayfalarda düzgün çalışıyor

  • Çok iyi. Şu anda boğuştuğum sorun metin + görsel olduğu için, bununla ilgili bir iki örnek olsa güzel olurdu
    Hizalama gerçekten baş ağrıtıcı. Inkscape’i de denedim ama ihtiyacım olan şeyi yapmak için kesinlikle “XML’i doğrudan yazmaya” daha yakın

    • Metnin bir çizgiyi takip etmesini sağlayan örnek dışında metinle çok deneme yapmadım
      text-anchorı biliyorum: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      Ayrıca burada birisi foreignObject etiketinin yararlı olabileceğini önermişti: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • Metin kesinlikle zahmetli. svgwrite ile tablo üreten Python kodunu aceleyle yazmıştım; metni istediğim konuma yerleştirmek tam bir cehennemdi
      Sonunda çeşitli değerleri kabaca ayarlayıp “bu kadarı yeterli” diyerek bıraktım. Önemsiz olmayan metin yerleşimi örneklerine ihtiyaç olduğu talebine katılıyorum
      [0] GitHub bağlantısı profilimde
    • Inkscape’in hizalama özelliği bende iyi çalışıyor. Daha hassas olmam gerektiğinde ctrl+shift+xe basıp koordinatları doğrudan giriyorum
      Inkscape’in XML düzenleyicisi benim ortamımda oldukça sık çöküyor ama her düzenlemeden sonra kaydetmeyi hatırlarsanız kullanılabilir

  • Genelde nasıl yapılıyor? İnsanlar SVG’yi doğrudan kodluyor mu, yoksa Figma gibi bir yerde çizip SVG dosyası mı oluşturuyor?

    • Grafik tasarımcı olarak eğitim aldığım için genelde Inkscape’te doğrudan çizdim ya da başka programlardan içe aktardım
      http://shapeoko.github.io/Docs/ içindeki dosya boyutlarını makul seviyeye indirmek epey çalışma gerektirmişti
      Daha sonra görsele tıklayınca yeni pencerede açılan bir mekanizma da yaptım: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      Ayrıca parça listesindeki parça adına tıklayınca diyagramda ilgili parçanın vurgulanmasını sağlayabiliyordum
    • Tasarım tarafındaki kişiler Illustrator, Sketch, Inkscape gibi tercih ettikleri düzenleyiciyi kullanacaktır. Kod yazanlar da bu tür yazılımlarla biraz düzenleme yapabilir ama etkileşim varsa genelde SVG’yi doğrudan düzenlerler
      Karmaşık şekilleri veya eğrileri bazen görselleştirmek için çevrimiçi bir düzenleyiciye koyuyorum; şu araç iyi: https://yqnn.github.io/svg-path-editor/
    • Daha karmaşık grafikler için hâlâ tasarımcı araçlarını kullanmak daha iyi olacaktır. Ama basit grafikleri doğrudan kodlayabilirsiniz
      Bir ok veya hamburger menü ikonu gerekiyorsa doğrudan koda girebilirsiniz. Bazen kâğıt kalemle başlayıp sonra koordinatları ayarlayarak yeterince iyi görünene kadar düzenliyorum
    • Adobe’ninki gibi yeni Transformer tabanlı vektör modelleri çıktıkça SVG üretmek her zamankinden kolay olacak: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • Üzerinde çalıştığım projelerde dosyaları Inkscape ile oluşturup veya düzenleyip normal görseller gibi bağladım
      Bazen belirli statik sayfalara özgü grafik gerektiği için sayfanın içine gömdüğüm oldu, ama o durumdaki grafikler çok karmaşık değildi

  • Yakın zamanda fark ettiğim şeylerden biri, React uygulaması içinde SVG etiketlerini JSX etiketleri gibi satır içi koyabilmekti
    Bunun tam olarak birinci sınıf destek mi olduğu yoksa Webpack’in mi hallettiği konusunda emin değilim ama bazı durumlarda içine mantık eklenmiş SVG bileşenleri oluşturma hissi çok iyi. Artık SVG’nin şeklini, renklerini, bazı bölümlerin atlanmasını vb. React tabanlı mantıkla değiştirebiliyorum

    • Basit bir SVG ise veya çok sayıda varyasyona ihtiyaç varsa iyi
      Ama SVG kodunu satır içi koyarsanız tarayıcı görseli önbelleğe alamaz. SVG büyükse veya yalnızca birkaç varyasyon varsa, her görsel varyasyonu için ayrı bir endpoint bulundurmak daha iyi olabilir
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • Doğru. HTML5’ten beri SVG’yi satır içi koyabiliyorsunuz ve Webpack gibi bir şeye gerek yok. Öylece çalışıyor
      Bu öğreticideki örneklerden biri de React’te üretilen veri tabanlı bir diyagram. İkisini birleştirince epey güzel şeyler yapılabiliyor