Bu yazıda bazı CSS animasyonlarını SVG simgeler oluşturma ile web sitelerimizi daha canlı görselliğini ön plana çıkarmanın yolları ve yöntemleri hakkında bilgilendirme yapmaya çalışacağım. Günümüzde her işletmenin kurumun ve hatta kişilerinde kendilerine ait web sitelerinin daha güzel daha renkli ve heyecanlı görünmesini istediğini biliyoruz. Bu istekleri karşılamak adına web developerlerine büyük işler düşse de CSS ve SVG teknolojisi işimizi oldukça kolaylaştırmayı başara bilmiştir. Bunlar sayesinde karşılamamız beklenilen istekleri karşılaya bilme fırsatı bulmuşken çok da zahmet vermeden bu işleri yapma olanağı sunmuştur. Css’in desteklediği SVG formatı sayesinde artık bir çoğumuz baktığımızda içimizi açan siteler göre biliyoruz.
Web üzerinde SVG kullanmak istiyorsanız işe simgeleri bulmak ve oluşturmak ile başlaya bilirsiniz. SVG’nin web sitelerin de kullanımının bize sağladığı avantajlar bizim CSS ile sitelerimizi hareketlendirmemizi canlandırmamıza olanak sağlamaktadır. Peki nedir bu avantajlar. Önemli bir konu olan site içeriklerinin boyutları kullanmış olduğumuz alan kapasitesini doldururken yüklemelerinde daha yavaş olmasına neden olmaktadır. SVG küçük dosya boyutlarına sahip olması sebebiyle bizim alandan tasarruf etmemizi ve görselliğe daha hızlı ulaşmamıza olanak sağlar. Büyük kullanımlarda ise bir çoğumuzun başına gelen görüntüdeki kayma ve kaşıklığın vektörel yapısı sayesinde düzgün ve görünmesine olanak sağlar. Retina display ekranlarda başarılı görüntüler elde etmemize olanak sağlayan SVG bizlere etkileşim ve filtreler ile tasarım yapılırken de kod desteği ile kontrol edile bilme imkanı sağlamaktan da çekinmez..
SVG formatı tamamen XML tabanlıdır. Bu sayede hem geliştiricilere hem de kullanıcılara benzer büyük avantajlar sağlar. SVG ile vurgulama, araç ipuçları, ses ve animasyon gibi yaygın kullanımdaki efektleri kullanan kullanıcı eylemlerine yanıt veren web grafikleri oluşturma imkanı sunar. SVG formatına en büyük darbe kodlarının okunmasının güç ve karmaşık olmasından gelmektedir. İlk bakıldığında içinden çıkılmaz halde görünen SVG kodları yardımcı programlar sayesinde oldukça basite indirgenmiş ve karmaşıklığından kurtulmayı başara bilmiştir. Kullanımı yaygın olan adobe illustrator kullanıcılara oldukça kolaylık sağlamıştır. Kullanıcıların düzenli kodlar ve dizeler ile çalışmasına yardımcı olmuştur.
Bu metinde CSS ve SVG ile oldukça etkili animasyonlar oluşturarak karşılamamız beklenen istekleri karşılaya bileceğimizi ve bunların aslında çokta karmaşık olan halinden nasıl kolay ve düzenli hale getire bileceğimiz hakkında azda olsa bilgi vermeye ve göstermeye çalıştım. CSS desteklediği SVG formatı sayesinde kullanımını aktifleştirmiş ve daha canlı daha hareketli web siteleri yapmamıza olanak sağlarken SVG ise illustrator sayesinde bize sunmuş olduğu kolaylıkları karşılık alırcasına yaptığı karmaşık kod satırlarından kurtararak kendi beğenilerimizi istediğimiz animasyonları tasarlamamıza kadar bir çok hususta bize fazlasıyla destek olmuştur. CSS üzerinde kullanmak istediğiniz SVG animasyonlarını tasarlamanın yanında bunun için hizmet vermekte olan bir çok animasyon bankası sitelerinden de yardım alabilirsiniz .
