SVG'yi kullanma. SVG grafikleriyle çalışmak için yazılıma genel bakış

Ne tür görüntülerin ve hangi dosyaların olduğunu anladık ve elle çizilmiş bir video için özel bir svg dosyası oluşturulduğunu öğrendik.

Belirli programlarda oluşturulduğu ve onlarla birlikte açıldığı için İnternette bulmak zordur, ancak şöyle görünür:

Bu dosya bir önceki yazımda belirttiğim gibi elle çizilmiş video programları için oluşturulmuştur. Bununla birlikte, elle çizilmiş video daha da çekici hale geliyor.

Dosya, hem konturlu çizime hem de kontursuz çizime izin verir.

Örneğin, programda bir PNG dosyası çizmek ve bir SVG dosyası kullanarak anahatsız çizim yapmak:

Ve bu örnekte dosyanın nasıl göründüğünü ve SVG anahatları kullanılarak çizildiğini göreceksiniz.Dosya Inscrabe programında vektör rasterleştirme kullanılarak yapılmıştır,

Bir test olduğu için kesinlikle yargılamayın. Bu programda daha iyi grafikler yapabilirsiniz.Bu benim ilk denememdi ama şunu anlamanızı isterim ki bitmap bir görüntü her zaman daha parlak ve daha renklidir.

Görüntüleri daha net bir anahatla vektör grafiklerine rasterleştirmek iyidir.

Bu dosyaları oluşturmak için hem ücretli hem de ücretsiz birçok program, grafik düzenleyici var. Sabit sürücüye indirmeyi gerektirmeyen taşınabilir olanlar var ve çevrimiçi siteler var

Herhangi bir dosyaya dönüştürmeye yardımcı olacak, ancak yalnızca siyah beyaz çalışan bir site:

İndirme işlemi otomatik olarak başlayacaktır, ancak virüsten koruma programınız size bu tür bir dosyanın bilgisayarınız için tehlikeli olduğunu söyleyebilir. Virüsten koruma yazılımım tüm nadir dosyalara yemin ediyor.

İnternette bulduğum ikinci çevrimiçi site

Bu site biraz daha karmaşıktır ve dosyaları renkli görüntüler. Bu durumda, renk sayısını kendiniz seçebilirsiniz. Ve bu sitede, anahatları olmayan bir resim oluşturmak için aynı svg'yi yapabilirsiniz. Siteyi Google'a yükleyip çevirisini yapmanızı tavsiye ederim, ingilizce olduğu için ama siz anlayabilirsiniz.

Online siteler ile bence her şey açık, bakalım programlardan neler bulabileceğiz.

Adobe Illustrator, en popüler ve iyi bilinen editörlerden biridir. Ücretlidir, ancak hiçbir şey imkansız değildir, hem ücretsiz hem de Rusça olarak bulunabilir. Ve onunla çalışmak için hem ücretsiz hem de ücretli sayısız ders, kurs var.

İçinde yapılan dosyalar yüksek kalitede ve Açıklamadio programı ile harika çalışıyor.

Tüm listeden yalnızca Inscape ücretsiz bir grafik düzenleyicidir. Adobe Illustrator gibi bir programın kötü bir analogu değil.

Corel'de doğruyu söyleyeceğim, çalışmayı denemedim.

Vektör büyüsünde, herhangi bir görüntüyü başka dosyalara dönüştürebilirsiniz, bu bir düzenleyiciden çok bir dönüştürücüdür. Ama yeterince kötü değil.

Böylece SVG dosyasıyla tanıştık. Sadece 2000'lerin başında ortaya çıkan, ancak web geliştiricileri ve tasarımcıları arasında güvenle yerini almaya başlayan yeni bir dosya.

Allahım seni bekliyorum. Tekrar görüşürüz.

Saygılarımla, Valentina Dudnichenko.

Bir SVG'yi web'de kullanım için hazırlamak çok basit bir işlemdir ve bir JPEG veya PNG'yi dışa aktarmaktan daha zor değildir. Alışık olduğunuz görüntü düzenleyiciyi (Illustrator, Sketch, Inkscape [ücretsiz] vb. [hatta şekil katmanları kullanıyorsanız Photoshop]) kullanmayı planladığınız görüntü boyutunda kullanın. Genelde Illustrator'da çalışıyorum, bu yüzden bu programda dosya hazırlamanın bazı yollarını açıklayacağım, ancak genel olarak bunlar başka herhangi bir programa uygulanabilir. Metni anahatlara dönüştürmek isteyebilirsiniz, çünkü sayfada kullanılan web yazı tipiyle biçimlendirmeyi planlamadığınız sürece yazı tipi büyük olasılıkla doğru şekilde görüntülenmeyecektir (ki bu mümkündür!). Ayrıca, özellikle nesneleri dönüştürmek dosya boyutunu küçültmediği için, özellikle sayfada kontrol etmeniz gereken bir konturunuz varsa, tüm nesneleri tek tip şekillere dönüştürmek iyi bir fikir değildir. Gruplara veya katmanlara verilen adlar, öğe kimliği olarak SVG'ye eklenecektir. Bu, şekillendirme için oldukça kullanışlıdır, ancak genel dosya boyutunu biraz artıracaktır.

Dışa aktarmayı yapmadan önce, tüm görüntülerin bir tamsayı piksel ızgarasında olup olmadığını kontrol etmeniz gerekir (yani, örneğin 23.3px × 86.8px değil). Aksi takdirde, büyük olasılıkla görüntü yeterli netliğe sahip olmayacak ve görüntünün bir kısmı kesilecektir. Illustrator'da bu şu şekilde yapılabilir: Object > Artboards > Fit to Artwork Bounds . Ardından farklı kaydet'i tıklayın ve SVG'yi seçin ve varsayılan ayarları bırakın. Burada yapılacak biraz optimizasyon var, ancak daha sonra çeşitli geliştirmeler uygulayacağımız için buna değmez, bu yüzden şimdilik bu ince ayarlarla zaman kaybetmeyeceğiz.

Dosya boyutlarını küçültme teknikleri.

(bkz. optimizasyon)

En küçük SVG boyutunu elde etmek için gereksiz her şeyi ondan çıkarmak mantıklı olacaktır. SVG'yi işlemek için en ünlü ve kullanışlı program (en azından ben öyle düşünüyorum) SVGO'dur. Gereksiz tüm kodları kaldırır. Fakat! SVG'yi CSS/JS ile değiştirmeyi planlıyorsanız, bu programı kullanırken dikkatli olun, çünkü kodunuzu çok fazla temizleyebilir ve başka değişiklikleri zorlaştırabilir. SVGO'nun rahatlığı, projenin otomatik inşa sürecine dahil edilebilmesidir, ancak aynı zamanda kullanabilirsiniz. GUI eğer istersen.

Tüm gereksizleri doğru bir şekilde kaldırarak daha ayrıntılı anlayarak, grafik düzenleyicide başka bir şey yapabiliriz. Öncelikle mümkün olduğunca az yol/şekil ve bu yollarda noktalar kullandığınızdan emin olmanız gerekir. Basitleştirilebilecek her şeyi birleştirip sadeleştirebilir ve gereksiz tüm noktaları kaldırabilirsiniz. Illustrator, genel şekli aynı tutarken noktaları kaldırmanıza yardımcı olacak Akıllı Fırça Kaldırma Aracı ile bir VectorScribe eklentisine sahiptir.

Ön optimizasyon

Akıllı Fırça Kaldırma Aracı noktaları kaldırdı

Ardından, resmi büyüteceğiz. Illustrator'da, piksel ızgarası görünümü Görünüm > Piksel Önizleme'yi açmak ve yolların nasıl düzenlendiğini kontrol etmek uygundur. Yolları ızgaraya yerleştirmek biraz zaman alacaktır, ancak çaba meyvesini verecek ve daha keskin bir işleme ile sonuçlanacaktır (buna önceden dikkat etmek daha iyidir).

Izgara dışındaki noktalar

Izgara hizalama

Hizalanacak iki veya daha fazla nesne varsa, tüm gereksiz çakışmaları kaldırmaya değer. Bazen konturlar dikkatli bir şekilde hizalansa bile ince beyaz bir çizgi görülebilir. Bunu önlemek için, üst üste binen yerlerde nesneleri hafifçe üst üste bindirebilirsiniz. Önemli: SVG'de, z-endeksi, alttaki nesneye bağlı olarak belirli bir sıraya sahiptir, bu nedenle, kodda dosyanın en üstündeki nesneyi koymaya değer.

Ve son olarak, son olarak, genellikle unutulan bir şey, sitenizdeki SVG'lerin .htaccess dosyasında gzip sıkıştırmasını etkinleştirmektir.

AddType resmi/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... vb

Bu tekniğin ne kadar etkili olduğuna bir örnek olarak, orijinal Sınırları Aşma logosunu alıp şu şekilde optimize edeceğim: boyutu olması gerektiği gibi artırın; Kontürleri sıralayacağım; Mümkün olan maksimum puan sayısını sileceğim; noktaları tamsayı piksellerle hareket ettirin; tüm örtüşen alanları taşıyın ve hepsini SVGO'ya gönderin.

Orijinal: 1.413b

Optimizasyondan sonra: 409b

Sonuç olarak, dosya boyutu ~ %71 küçüldü (ve sıkıştırıldığında ~ %83 küçüldü)

Sparkol VideoScribe programında elle çizilmiş bir video oluştururken, soru ortaya çıkıyor: SVG görüntülerini nereden veya nasıl kendiniz ve hangi programda yapabilirsiniz?

SVG görüntülerini ücretsiz olarak nereden indireceğinizi öğreneceksiniz. SVG formatında görüntüleri kendiniz yapabileceğiniz grafik programlarıyla tanışın.

G

İşte SVG görüntülerini tamamen ücretsiz olarak indirebileceğiniz en iyi hizmetlerden ikisi. Bunlardan ilki: pixabay.com - Rus dilini destekliyor. Kayıt gereklidir (hızlı), ancak resim seçme anlamında en uygun ve iyidir.

Oradaki resimlerin konuya göre uygun bir dökümü var: insanlar, iş, tıp, teknoloji, vb. Ne yapılmalı? "Vektörler" biçimini ve saydam bir arka planı seçin, ayrıca görüntülerin siyah beyaz rengini de seçebilirsiniz:

Her şey basit. SVG görüntülerini ücretsiz olarak indirebileceğiniz bir diğer hizmet ise openclipart.org'dur. Oraya kayıt olmanıza bile gerek yok.

Peki ya orijinal SVG görüntülerine ihtiyacınız varsa? Nasıl çizileceğini bilmiyor olsanız bile onları kendiniz yapabilirsiniz.

Kendi SVG resimlerinizi nasıl yapabilirsiniz?

Her şeyden önce, SVG formatının vektör grafikleri olduğunu belirtmekte fayda var. Çizim yapabilenler grafik tabletler - sayısallaştırıcılar kullanır. En ünlü üretici Wacom'dur. Bir ekranları ve kalemleri var, yardımlarıyla bilgisayar grafikleri çiziyorlar.

Peki ya çizim becerisi olmayanlar? Ve fare ile çizim yapmak da işe yaramaz.

SVG görüntülerini kendi başınıza oluşturabilen birkaç grafik programı vardır. Bunlar vektör grafik editörleridir, örneğin: CorelDraw, Adobe Illustrator, Sketsa SVG Editor ve diğerleri. Ancak, herhangi bir işletim sistemi için uygun olan ücretsiz vektör düzenleyici Inkscape'de (inkscape.org) bir SVG görüntüsü oluşturmaya bakacağız.

Inkscape, SVG grafik formatı ile çalışmak üzere özel olarak tasarlanmıştır. SVG'yi PNG'ye dönüştürmeyi destekler ve tam tersi: bazı grafik biçimlerini SVG'ye dönüştürmenize olanak tanır. Fakat! Bu tür SVG görüntüleri VideoScribe'da oluşturulmaz. Ama bir çıkış yolu var!

Inkscape editörünün tüm avantajlarını anlatmayacağım. Ancak, Inkscape'in bizi ilgilendiren benzersiz bir özelliği olan düğümleri şekillendirmeye odaklanacağım. Basit bir ifadeyle, bunun anlamı şudur: Bu konturun çizgileri ne kadar kavisli olursa olsun, görüntünün herhangi bir konturunu tekrarlayabiliriz.

Pratikte bunun anlamı şudur: ek bir yarı saydam katman kullanarak, herhangi bir resmi kolayca yeniden çizebiliriz - sanki aydınger kağıdından geçer gibi! Ve gerekirse boya - resmin kapalı hatlarını herhangi bir renkle doldurun.

Bunu yapmak için, tercihen net anahatları olan herhangi bir vektör görüntüsüne ihtiyacımız var. Programda açın, boyutu, onunla çalışmak için uygun olacak şekilde ölçeklendirin:

Şekil 1. Inkscape programının çalışma penceresi ve araçları:
1 - Seçim (F1);
2 - Kontur düğümlerini veya düğüm kollarını düzenleyin (F2);
3 - Ölçek (F4);
4 - Bezier eğrileri ve düz çizgiler çizin (Shift+F6).

Ek bir katman oluşturun: Shift + Ctrl + N ("Katman - Yeni Katman"). Paneli - Shift + Ctrl + L ("Katman - Katmanlar") açarak ilk katmanın şeffaflığını ikinci katmanın altından iyi görünecek şekilde ayarlayın:

Yine ikinci katmanı seçin, çalışmasını sağlayın ve eğriler ve düz çizgiler çizmek için aracı seçin (Şekil 1-4). Bunun yardımıyla, ikinci katmandaki kontur çizgisini bir şekilde tekrarlıyoruz:

Çift tıklama, çizginin çizimini tam olarak belirtilen konumda kesecektir.

Aracı (Şekil 1-2) kullanarak, kolları (düz çizgi parçaları) resmin ana hatlarına çekmeniz yeterlidir:

Inkscape'in harika özelliklerinin devreye girdiği yer burasıdır. İmleci hafifçe sola veya sağa hareket ettirerek, verilen konturun tam bir tekrarını hızla elde ederiz. Büküm herhangi bir çıkıntı olabilir. Gerekirse, konumlarının daha doğru bir şekilde ayarlanması için düğümleri kaydırmak için aynı araç (Şekil 1-2) kullanılabilir.

Şimdi bu işlemi gerekli sayıda tekrarlamak için kalır. Küçük detayları çizmek için, istenen alanı çalışma penceresinin ortasına getirerek resmi yakınlaştırın (Şek. 1-3).

Açıklığa kavuşturulması gereken bir şey daha var. Çizginin kalınlığını veya rengini ayarlamak için şunu yapın: Shift + Ctrl + F (“Nesne - Doldur ve Kontur”):

Yeni bir görüntü açarken, program görüntünün kendisiyle her zaman eşleşmeyen dikdörtgen bir çerçeve gösterir. Bunu şu şekilde kaldırabilirsiniz - Shift + Ctrl + D ("Dosya - Belge Özellikleri") seçeneğine gidin - ardından "Tuval kenarlığını göster" kutusunun işaretini kaldırın:

Her şey. Artık gerekmeyen ilk katmanı silin ve resmi kaydedin: Shift + Ctrl + S (“Dosya - Farklı Kaydet”), dosya türünü seçin: .svg.

Bir küçük detay daha. Windows Gezgini, SVG grafik dosyalarının küçük resimlerini (önizlemelerini) göstermez. Kolaylık sağlamak için Sparkol VideoScribe geliştiricilerinin yaptığı gibi yapmak mantıklıdır. Genişliği veya yüksekliği yaklaşık 100 piksel olan küçük bir boyut oluşturun (SVG görüntülerinin boyutu yoktur), yeni görüntüleri PNG formatına aktararak kopyalayın. Bu Inkscape'de yapılır: "Dosya - PNG'ye Aktar". Bunları SVG "kopyaları" ile aynı klasöre kaydedin.

Ancak Windows 7'niz varsa, şanslısınız. İnternette ücretsiz bir Explorer uzantısı arayın, tam adı burada: "Windows Gezgini için SVG Görüntüleyici Uzantısı". SVG dosyalarını küçük resimler olarak görüntülemenizi sağlar. Windows XP için - uygun değil.

Bugün SVG'nin nasıl bir format olduğu, ne ile yendiği ve kullanmaya değer olup olmadığı hakkında konuşacağız. Format özellikle yeni olmasa da tanıtımı sayesinde popülerliğini kazandı. Tarayıcıların tüm yeni sürümleri bu biçim için zaten destek almıştır.

Neden bu kadar popüler? Ve onu diğerlerinden tam olarak farklı kılan nedir? Bugün bu soruları yanıtlayacağız ve ayrıca bu tür dosyalarla çalışmaya başlamak için bilmeniz gerekenleri anlatacağız.

SVG nedir?

SVG, web geliştiricileri için vektör tabanlı bir format olan Ölçeklenebilir Vektör Grafikleri anlamına gelir. SVG bir vektör formatı olduğundan, görüntülerinin kalite kaybı olmadan yüksek çözünürlüklerde görüntülenebilmesi nedeniyle bu format türü çok popüler hale geldi.

Bu biçimlendirme dilinin geliştirilmesi için itici güç, ilk olarak 1999'da W3C olarak daha iyi bilinen World Wide Web Konsorsiyumu tarafından verildi. W3C, iki boyutlu grafik arayüzler ve görüntüler oluşturmak için SVG - dil işaretlemesi kavramını verdi.

Pratikte kullanın

SVG'yi bu kadar popüler yapan nedir ve neden daha fazla tasarımcı onu kullanmaya başlıyor? Her şey çok basit, olması gerektiği gibi çalışıyor.

SVG, diğer biçimlere kıyasla hafiftir. Bu formatın inanılmaz olanakları var. Bayraklar, semboller, arayüz elemanları. Ve bu, nasıl kullanılabileceğinin sadece küçük bir listesi. Kullanmanın en büyük artısı vektör formatında olması yani herhangi bir ekranda kullanılabiliyor olması - çözünürlüğü ne olursa olsun her yerde aynı şekilde görüntülenecektir.

SVG dosyalarının yönetimi, statik bir görüntü olarak kaydedildiklerinden oldukça kolaydır. SVG ile çok basit ama güzel animasyonlar yaparak sitenize biraz etkileşim katabilirsiniz.

Nerelerde kullanılabileceğine dair birkaç örnek:

• Logolar
• arka plan görüntüsü
• Düğme olarak kullan
• kartlar
• Diyagramlar veya çizimler

Kural olarak, SVG çoğunlukla duyarlı web siteleri, animasyonlar ve diğer dinamik efektler oluşturmak için kullanılır.

SVG kullanmanın artıları

Öyleyse neden normal JPG veya GIF'i SVG lehine terk edelim? Hala projenizde kullanmanız için birçok neden var.

• SVG bir vektör biçimidir, bu nedenle görüntülerin boyutunun kullanıcının ekranının çözünürlüğüne bağlı olduğu duyarlı siteler için kullanılmalıdır ve SVG tüm gereksinimleri mükemmel şekilde karşılar.
• SVG görüntüleri, özelliklerini tanımlamak için XML kullanır ve bu nedenle daha da sıkıştırılabilir olma özelliğine sahiptir.
• SVG görüntülerinin yönetimi çok kolaydır ve bu, tasarımcıların renkleri değiştirmesi, gölgeler, filtreler, bulanıklıklar ve daha pek çok efekt eklemesi için daha da fazla olanak sağlar.
• SVG'yi anlamak oldukça kolaydır.
• SVG, açık web standartlarıyla çalışır
• SVG'yi oluşturmak için normal bir metin kodu düzenleyicisi kullanabilirsiniz. Bu size eylemde biraz özgürlük verir, her şey ihtiyaçlarınıza ve bu alandaki uzmanlık düzeyinize bağlıdır.

SVG kullanmanın eksileri

Muhtemelen SVG'nin sahip olduğu ne kadar iyi şey karşısında şaşkına dönmüşsünüzdür. Ve belki de eksileri olmadığını düşündüler. Ama hayır, kesinlikle bir çift var ve işte bunlardan bazıları:

• Explorer 8 ve altı gibi eski tarayıcılar için destek yoktur.
• SVG, vektör formatı olduğu ve çeşitli şekil ve çizgiler oluşturmak için kullanıldığı için fotoğraflarda kullanılamaz.

Sıradaki ne?

SVG'nin geleceği daha yeni başlıyor. Mobil için kabul edilen görüntü formatı (ve standart) olarak SVG yalnızca ivme kazanmaya devam edecek.

Web siteleri, mobil uygulamalar ve etkileşimli projeler için karmaşık SVG animasyonunun oluşturulması ve programlanması. Arayüzlerin rahatlığı nasıl artırılır ve vay etkisine neden olur.

SVG nedir

SVG, kelimenin tam anlamıyla "ölçeklenebilir vektör grafikleri" olan iki boyutlu bir vektör grafiğidir ve yine de, bir not defterinde kolayca düzenlenebilen veya vektör editörlerinde basitçe çizilebilen bir metin biçimidir: Adobe Illustrator, CorelDRAW, Adobe Fireworks, Incscape, SVG-Edit Online, ConceptDraw PRO ve diğerleri.

SVG'nin asıl gelişimi, 2011'de W3C tarafından yayınlanan 1.1 sürümüyle başladı. Flash'ın yeteneklerini aşan geliştirilmiş sürüm 2.0'ın duyurusu 2017 için planlanıyor. XML biçimlendirme dili sayesinde, bir HTML belgesine kolayca gömülür.

SVG nesneleri, grafik düzenleyicilerdeki standart nesnelerden farklı değildir.

Müzikal metaforları soyutlayalım ve bazı temel beste ipuçlarını gözden geçirelim. Emin olmak:

Çizgiler ve kırık çizgiler

çokgenler

Daireler ve elipsler

Bezier eğrileri

Karmaşık konturlar

SVG, herhangi bir XML tabanlı format gibi, onu işlemek için dönüştürme tablolarını (XSLT) kullanmanıza izin verir. Basit XSL kullanarak XML verilerini SVG'ye dönüştürerek, metin verilerinin grafiksel bir sunumunu elde edebilirsiniz, örneğin, grafikleri görselleştirin, pasta çizelgeleri, çubuk çizelgeler

masaüstü için SVG

SVG, ölçekleme sırasında kaliteyi kaybetmez ve ekran çözünürlüğüne bağlı değildir

Nesne hakkındaki bilgilerin açıklayıcı bir biçimde saklanması nedeniyle, bir grafik aygıtına çıktı verirken grafik primitifini sonsuz şekilde artırabilirsiniz.

Tanımlayıcı kısım tarafından işgal edilen veri miktarı, nesnenin gerçek boyutuna bağlı değildir; bu, minimum miktarda bilgi kullanarak, minimum boyutta bir dosya ile keyfi olarak büyük bir nesneyi tanımlamaya izin verir. Örneğin, keyfi yarıçaplı bir dairenin tanımı, nitelikleri saymadan sadece 3 sayı gerektirir.

Şeffaf bir arka plana sahip olmak

mobil için SVG

SVG, mobil cihazlarda ve tabletlerde kalite kaybı olmadan iyi görünüyor

SVG nesneleri genellikle bitmaplerden çok daha küçüktür

CSS3 ve JavaScript kullanarak SVG öğelerinin stillerini ve niteliklerini değiştirebilirsiniz.

SVG, bir mobil cihazda kullanıcı ile görsel iletişim ve mikro etkileşimler için idealdir.

SVG'ye dayalı animasyon

Şeffaf bir arka plana sahip olmak

Oluşturması ve düzenlemesi kolay

Kalite kaybı olmadan gzip sıkıştırma ve optimizasyona uygun

SVG'den en iyi şekilde yararlanma

Uyarı

Bir görüntüdeki ince ayrıntı miktarı arttıkça SVG dosyasının boyutu da büyür. JPEG ve hatta png kullanmak daha kolaydır. Örneğin, bir çimenin vektör görüntüsü 10 mb ağırlığında olabilirken, jpg'deki aynı görüntü 200 kb ağırlığında olacaktır.

SVG ile nasıl çalışılır. Teoride bilmeniz gerekenler nelerdir?

SVG belgesinin yapısı ayrı bir dosyada.

Tam animasyon için yalnızca SVG'nin satır içi yerleştirmesini kullanacağız.

Html'ye gömmek için minimum set:

viewBox="x y genişlik yüksekliği" - özel bir görünüm alanı tanımlar

Tüm simgeler tek bir dosyadayken ve kapsam yalnızca ihtiyacınız olanı gösterdiğinde, bir sprite analogu kullanabilirsiniz.

Görüntünün en boy oranını ayarlamak için koruyucuAspectRatio ile hizalama gereklidir

Görünüm alanında X ekseni:

xMin - görünümün sol sınırı

xMid - x ekseninde merkez

xMax - görünümün sağ sınırı

Görünüm alanında Y ekseni:

YMin - üstte

YOrta - merkezli

YMax - alt

karşılamak - görüntünün en boy oranını koruması ve tamamen görünür olması gerektiğini belirtir (background-size:contain; öğesinin CSS eşdeğeri)

dilim - görüntünün en boy oranını koruması gerektiğini ve maksimum görüntü alanı sınır değerine göre ölçekleneceğini belirtir (background-size:cover'ın CSS eşdeğeri;)

yok - iç görüntünün en boy oranını kaybedeceği ve viewBox'ın en boy oranını kullanacağı anlamına gelir.

Temel SVG İlkelleri

Ayrıntılara girmeyeceğim (ayrı bir makalenin konusu), açıklamaları W3C standardında bulunabilir https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#RectElement

Ve yoldaki herhangi bir noktayı ve bezier eğrilerini kontrol etmenize izin verdiği için etiketle en çok ilgileniyoruz. Aşağıda pratik blokta tartışılacaktır. Birkaç eğri inşa modeli olduğunu bilmek önemlidir:

• (S,s)'ye düzgün eğri

  ikinci dereceden Bezier eğrisi (Q,q)

  düzgün ikinci dereceden Bezier eğrisi (T,t)

  eliptik yay (A,a)

Amacım materyali olabildiğince basit bir şekilde sunmaktır, bu nedenle açıklayıcı örnekler için Peter Collingridge'e teşekkürler http://www.petercollingridge.co.uk/svg-tutorial/paths.

Şirketin tecrübesine göre, mutlak nokta koordinatlarıyla çalışmanın daha kolay olduğunu söyleyebilirim.

Nesneleri etiketlerle klonlama ve

Aynı türden birçok simgeyi çok sayıda renk tonuyla kullanan bir projemiz vardı. Sorun, birçok değişkene sahip tüm sayfalar için global bir satır içi SVG oluşturularak çözüldü. . Sayfada doğru yerlerde kullanılır . CSS, use.green rengini kullandı (dolgu: #ADFF2F;).

gradyanlar

SVG ile nasıl çalışılır. Pratikte bilmeniz gerekenler nelerdir?

Var s = Snap("#svg"); // sayfada bitmiş svg'yi alın veya yeni bir tane oluşturun s = Snap(800, 600); // yeni bir yol çiz var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr(( fill: "none", kontur: "#bada55 " , vuruş Genişliği: 5 ));

Animasyonun özü, ilk konumdan son konuma sorunsuzca hareket etmektir. Aşağıda, SVG'ye dayalı animasyon oluşturmaya yönelik adım adım bir kılavuz bulunmaktadır.

SVG'yi HTML'ye gömme yeteneği, size SVG öğelerini ve niteliklerini JS ile yönetmenin avantajını sağlar. Aşağıdaki resimler sadece noktalara değil, bezier eğrilerine de ulaşabileceğimizi gösteriyor.

Vektör grafikleriyle çalışma yeteneğine sahip herhangi bir grafik düzenleyicide bir yol paneli bulunur.

Onun yardımıyla noktaları ve bezier eğrilerini kontrol edeceğiz.

Görevimiz, eğrilerin ilk ve son konumlarını çizmektir. Ve html sayfasındaki animasyonu Javascript ile anlatın.

Gelecekteki animasyonun yörüngesini görsel olarak belirleyin

Gördüğünüz gibi, her şey basit! Afin dönüşüm matrisleri gerekli değildi :)

Animasyon, etkileşim ve mikro etkileşim için SVG nasıl kullanılır?

Önemli nokta: Neden standart SVG animasyon araçlarını kullanmıyoruz? SMIL (Senkronize Multimedya Entegrasyon Dili), W3C'nin artık SMIL'i desteklemeyeceği için düşünülmez.

Örneğin, XML biçimindeki iki eğriyi alın

Animasyon programlama (noktaların X,Y koordinatlarını değiştirmek) şuna benzer:

1. M 166.5 142.5 518 182.5 885.5 142.5
2. M 166.5 150 L 518 190 L 885.5 150
3. M 166.5 155 L 518 195 L 885.5 155
4. M 166.5 350 L 518 170 L 885.5 350
5. M 166.5 355 L 518 175 L 885.5 355
6. M 166.5 362.5 518 322.5 885.5 362.5

!!! Puan sayısının eşleşmesi önemlidir.

Örneğe devam ediyoruz. Bir dışbükey kare yapmak istiyorsak. 8 noktalı bir kare çizmeniz gerekiyor.

Böyle bir kareyi canlandırmak için kod:

Var s = Snap($("svg")); varpath = s.path(start_path); // başlangıç ​​konumunu ayarla $("oynat").click(function () ( path.stop().animate(( "path": end_path ), 500, mina.easeout); // bitiş konumu (işlev () ( path.stop().animate(( "path": start_path ), 500, mina.backout); // başlangıç ​​konumunu döndür )).delay(500); )); //kod sadece özü taşır ve çalışması gerekmez

Snap SVG kitaplığı, hareket hızı işlevlerini kullanarak yollar arasında hareketi "çizir".

!!! Ana şey, kalite kaybı olmadan %100 yüksek kaliteli çapraz tarayıcı animasyonu elde etmemizdir.

Konunun teknik yönüne değindik ancak animasyon programlamadan daha üst bir seviye var. Bu konseptle ilgili.

Animasyon konsepti

Çeşitli animasyon konseptlerine bakıldığında, daha çok sunumsal olarak adlandırılabilecek ve projede kullanılamayacak yanlış bir animasyon görülebilir. Animasyonun kullanıcıya gerçekten yardımcı olduğu ve bir wow etkisi yarattığı zaman, bize göre ilginç olan bir dizi çözüm derledik.

İyi bir animasyon, sonuca ulaşmak açısından doğru olmalıdır. Kullanıcıya arayüzle nasıl çalışacağını açıklamalı, içinde gezinmeye yardımcı olmalı - şimdi, düz tasarım günlerinde düz tasarımı canlı ve gerçekçi hale getirmek için ilk girişimleri görüyoruz.

Çeşitli web siteleri ve mobil uygulamalar için arayüzlerle ilgili pratik deneyimlerimize dayanarak, animasyonun çeşitli kurallarını ve avantajlarını belirleyebildik:

Kullanılabilirliği iyileştirin

özgünlük

Kullanım kolaylığı

Aynı Anda Birden Fazla Paralel Görev Çalıştırma

Arayüz hızlandırma

Kullanıcı Geri Bildirimi İyileştirme

Animasyon Hedefleri

Animasyon kuralları

Arayüzün doğru çalışmasının ek bir göstergesi olarak animasyon

Yerden tasarruf etmenin bir yolu olarak animasyon

Arayüze gerçekçilik katmanın ve kullanılabilirliğe zarar vermeden wow etkisi yaratmanın bir yolu olarak animasyon

"Hataları" gizlemenin veya kullanıcının dikkatini dağıtmanın bir yolu olarak animasyon (yükleyiciler, paralaks indirmeleri, ilerleme göstergeleri)

Sayfayı veya ekranı yeniden yüklememeli, uzun ve can sıkıcı yüklemeye neden olmalıdır.

Hedef kullanıcının ürünle çalışırken karşılaşacağı farklı cihaz ve koşulları göz önünde bulundurarak animasyonu dikkatlice düşünmek gerekir.

Animasyon, ekrandaki veya web sayfasındaki ana özelliklerden veya içerikten çok fazla dikkat dağıtmamalıdır.

Ürünün algılanmasında genel uyumu korumak için uygulamanın veya web sitesinin genel stil konseptiyle tutarlı olmalıdır.

Esnek Tasarımda SVG'nin Rolü

Elastik ön yükleyici

Sorunsuz Geri Bildirim Formu

elastik menü

Arayüzlerde yüksek kaliteli animasyonun rolü büyüyor. Arayüzler, düz simgelerden ve çizgi animasyonlarından daha canlı olabilir. Böylece elastik tasarım kavramı doğdu.

Ve her şeyden önce, elastik tasarım, kullanıcı eylemlerine yanıt veren bir tasarımdır. Elastik tasarım, hareket özgürlüğünü kısıtlamaz. Ve kullanıcıların gerekli işlemleri yapmasına yardımcı olur. Elastik tasarım, uzamsal arayüzlerin yanı sıra "tek penceredeki arayüzler" yönüne mükemmel uyum sağlar.

Müşterilerimizden birinin dediği gibi: "Jöle gibi, her dokunuşta titriyor."

SVG'nin duyarlı tasarımdaki rolü, animasyon, esneklik, akışkanlık, karşılıklı bağımlılık, akışkanlık, katmanlama... Temel olarak, daireyi canlandırmak.

Esnek Tasarım Temelleri

Elementler kendi başlarına yaşamazlar. Her öğe birbirine bağlıdır ve tek bir ara bağlantı sisteminden oluşan bir alan yaratır.

Elastik tasarım her çözünürlüğe uyum sağlar.

Her öğe, kullanıcı eylemleri hakkında geri bildirim verir. Kullanıcının şu veya bu eylemin performansı hakkında herhangi bir şüphesi olmamalıdır.

Elastik tasarım, öncelikle arayüzlerin rahatlığına yöneliktir.

Hareket hızı ve svg filtreleriyle animasyonu geliştirin

Odaklandığımız iki ana animasyon türünü tekrar edeyim:

elastik animasyon

Mikro etkileşimde animasyon

SVG standardında 19 filtre vardır:

feBlend - katman katmanları (bindirme, ekran, çarpma ve diğerleri)

feColorMatrix - renkli matris, görüntülerin rengini kontrol etmenizi sağlar

feComponentTransfer - photoshop efektleri gibi renkleri değiştirmek için kullanılır - parlaklık ayarı, kontrast ayarı, renk dengesi veya eşikleme.

feComposite, iki katmanı üst üste getirmek veya kesmek için kullanılan bir kompozit filtredir.

feConvolveMatrix - eğim, kabartma, keskinleştirme ve kenar algılama efektlerinin analogu.

feDiffuseLighting - yönlü aydınlatma, çarpma haritalamaya biraz benzer

feDisplacementMap - ikinci görüntünün piksel koordinat değerlerini kullanarak görüntünün yerini değiştirir

feFlood - aslında yeni bir kare çizer

feGaussianBlur - bulanıklık

feImage - vektör grafiklerini bitmap'e dönüştürün

feMerge - SVG filtrelerinin paralel birleşimi

feMorfoloji - orijinal görüntünün kenarlarını inceltmek veya kalınlaştırmak gerektiğinde kullanılır

feOffset - x ve y koordinatlarında görüntü kaydırma

feSpecularLighting - arka ışık

feTile - mozaik ve desen analogu

feTurbulence - fraktal veya düzensiz gürültü oluşturur

feDistantLight - vurgulama filtresi

fePointLight - vurgulama filtresi

feSpotLight - arka ışık için filtre

Photoshop neden olmasın? Sıralı filtreleme kullanabiliriz.

SVG filtrelerini sırayla katmanlayarak duyarlı tasarımda nasıl "akışkanlık" yaratılacağına bir göz atalım.

Giriş bulanıklığı orijinal görüntüyü alır, bir bulanıklık sonucu üretir.

Renk matrisi bir bulanıklık sonucu alır ve bir ışıma üretir. Bu, bileşik filtre için bir alfa kanalı oluşturmak üzere gelen görüntünün rengini değiştirir.

Bileşik filtre, atop operatörünü (http://apike.ca/prog_svg_filter_feComposite.html) kullanarak ışıma sonucunu orijinal görüntünün üzerine yerleştirir.

Çıktıda sadece noktalar arasında "akışkanlık" elde ederiz.

Düzgün işlevlerin nasıl çalıştığına bir örnek.

Snap.SVG kitaplığında, yetersiz işlevlere sahip “mina” değişkeni bunlardan sorumludur.

Hareket hızı özelliklerinin tamamı http://easings.net adresinde bulunabilir.

Sonuç

Elastik arayüz animasyonu, etkileşimli öğelerin kullanımı sorunları daha hızlı ve daha ilginç çözmenize olanak tanıdığından, kullanıcıları sitede tutmanın harika bir yoludur. Ve teknolojinin gelişmesi, çok yakında tam teşekküllü Photoshop araçlarını animasyon imkanıyla web'e aktarmayı mümkün kılacaktır. Ancak hareket tasarımını uygulamadan önce, kullanılabilirliği geliştirme potansiyelini analiz etmeniz gerekir. İyi animasyon konsept aşamasında doğar ve net hedefleri vardır. Pürüzsüzlük özellikleri harekete hayat verir. Gerçekten canlı bir daire bekliyoruz. "Görsel iletişim" sürecinde animasyon kullanmanın avantajları ve kullanışlılığı açıktır ve olası dezavantajlardan daha ağır basmaktadır.

, Alla Kudin .

AFINAGE TASARIM ve AFINAGE YAPIM departmanları tarafından yazılan yazı.