Grafik ve Animasyon

Genel Tanımlar
Serkan AKSU
www.serkanaksu.net
[email protected]







Photoshop CS6 & CC
Yazar
:Özge Mardi BAYAR
Kategori
: Grafik / Tasarım
ISBN
: 978-605-4205-912
Sayfa Sayısı : 544
Çıkış Tarihi : 01.08.2012
Fiyat
: 34,00
www.serkanaksu.net
Grafik Nedir?



Yazı, resim, ve çizgi anlamında kullanılır. Çağdaş
sanat terimi olarak “resim ve fotoğraf yoluyla yapılan
tüm iletişim” araçlarına verilen addır.
Grafik sanatçısı mesajını resim, fotoğraf, illüstrasyon
ve yazı (tipografi) yoluyla insanlara iletir.
Çoğaltma aracı olarak Internet, matbaa teknikleri,
film ve televizyon kullanılmaktadır.
www.serkanaksu.net
3
Tasarım Nedir?

Tasarım bir problemin çözümüdür. Birden çok
doğru çözüm yöntemi vardır. Tasarımda
başarı ise çekicilikte değil mesajın en yalın
biçimde anlatımı buluş ve işlevselliktir.




Gerekli olanın araştırılması,
Tanımlanmış bir amaca yönelik yapılan ürün
çalışması,
Belli bir amaç çerçevesinde gerçekletirilen süreç,
Zeka ve yeteneğin ortak ürünlerini oluşturmaktır.
www.serkanaksu.net
4
Temel Metotlar

İki Temel Metot:
 Vektör
CDR, SWF…


Bitmap
BMP, TIF, JPG, GIF…
Video ve Hareketli Görüntü Formatları:
MPEG, AVI, FLV, SWF,…
www.serkanaksu.net
5
Grafik Türleri
Vektör Grafikler ve Bitmapler
www.serkanaksu.net
VEKTÖR GRAFİK



Sol alt köşeden 15 derece açıyla
kuzey yönünde 6 cm mavi bir çizgi
(x,y) koordinatları (2,1) den (4,7) ye
2px kalınlığında yeşil çizgi
çiz şeklindeki formüllerden oluşur.
Bu nedenle vektör grafikler;


daha az bilgi barındırır
daha küçük boyutlu olabilir.
www.serkanaksu.net
7
Vektör Grafik Türleri



Çözünürlükten bağımsız olan, ölçeklenebilir vektör
grafikler, genelde matbaacılıkta ve çizgi film,
karikatür benzeri görüntüler oluşturmada
kullanılırlar.
Vektör grafiklerin boyutu değiştirildiğinde görüntü
kalitesi bozulmaz.
Başlıca formatları: AI (Adobe Illustrator), CDR
(CorelDRAW), CMX (Corel Exchange), CGM
Computer Graphics Metafile, DRW (Micrografx
Draw), DXF AutoCAD, WMF (Windows Metafile).
www.serkanaksu.net
8
Karikatür Örneği
www.serkanaksu.net
9
Vektör Grafiklerin Özellikleri-I


Çözünürlüğe göre yeniden meydana
getirildikleri için ekranda iyi görülmenin
dışında kağıda çıktı alırken de başarılı
sonuçlar sağlamaktadırlar.
Bu tip grafikler metinleri de, özellik olarak
barındırdığından resim içindeki yazılar da
kaliteli olarak görüntülenir.
www.serkanaksu.net
10
Vektör Grafiklerin Özellikleri-II


Çizilen şekillerin
arkaplanları olmak
zorunda değildir. Vektör
grafikler dörtgenlerle
sınırlandırılmamıştır.
Başka nesnelerin
üzerine yerleştirebilen
bu grafiklerin boş
bölümlerinde diğer
Bitmap biçimde kaydedilen bir dairenin dörtgen bir
nesneler
çerçevesi mutlaka olacaktır. Bu çerçevenin boş
alanları arka plana uymadığında istenmeyen
görüntülenebilir.
görüntüler ortaya çıkabilir. Ama vektör grafiklerde
böyle bir sorun yaşanmaz.
www.serkanaksu.net
11
Vektör Grafiklerin Özellikleri-III


Vektör grafikler yazılımlar sayesinde elde
edilir.
Bir yazılım kullanmadan tarayacımızdan
aktardığımız resimleri vektör grafik olarak
kaydedemeyiz!
www.serkanaksu.net
12
Vektör Grafiklerin Özellikleri-IV



Vektör grafikleri bitmap formatına çevirmek
oldukça kolaydır.
Bu işlemi yaparken, orijinal dosyayı ve ilk
halinin bir kopyasını saklamak gerekir. Daha
farklı boyutlarda bir bitmap istendiğinde
bundan yararlanılır.
Nedeni: Vektör grafik, bitmap dosyanına
dönüştüğünde tüm yararlı vektör özelliklerini
geride bırakır.
www.serkanaksu.net
13
Vektör Grafiklerin Özellikleri-V


Office dökümanınıza bir clip art resim eklerken
dosyanın uzantısının wmf olduğunu fark
edebilirsiniz. Metafile olarak adlandırılan wmf ve emf
uzantılı dosyalar da bir nevi vektör grafik
dosyalarıdır. Farkı ise, vektör komutlarıyla beraber
içlerinde bitmap resim görüntüleyebilirler.
Örneğin vektör olarak çizilmiş bir pencerenin dört
parçasından birinde yine formüllerle belirtilmiş
özellikler yerine dışardan çağrılmış bir bitmap resim
görüntülenebilir.
www.serkanaksu.net
14
BİTMAP GRAFİK
Temel Kavramlar
Pixel
• Ekranda kontrol edilebilen ve resimleri tanımlayabilen en
küçük noktalara (ki bu noktalar kare şeklindedir) pixel
denir.
• Bir pixel kırmızı, yeşil ve mavi renklerin karışımından
oluşur.
• PIcture ELement den kısaltılmıştır.
• Pixel, resimlerin tanımlanmasında kullanılan temel ölçü
birimidir.
www.serkanaksu.net
15
BİTMAP GRAFİK
Temel Kavramlar
Pixel
• Pixel tabanlı resim dökümanlarına Bitmap adı verilir.
• Dijital ortamda bulunan resimler milyonlarca pixelin bir
araya gelmesiyle oluşurlar.
• Renk ve şiddet düzeyleri ayrıntıları ve sürekliliği belirler.
• Her pixel rengini ve şiddetini ifade eden bir sayı dizisi ile
gösterilir.
Grafik ve Animasyon
www.serkanaksu.net
16
BİTMAP GRAFİK
Temel Kavramlar
 Pixellerin sayısı ve renk derinliği resmin kalitesini belirler.
 Pixel tek başına bir ölçüyü ifade etmez. Verilen pixel
sayısı belirtilen alan içerisindeki pixel sayısıdır. Örneğin;
1 cm’deki pixel sayısı 100 olarak alalım;
1 cm =10 mm
pixel boyutu: 10 (mm)/100 (pixel) = 0.1 mm’dir
www.serkanaksu.net
17
BİTMAP GRAFİK
Pixel
• Şekilde bir resmin temel yapısı
görülmektedir.
• Her bir kare bir pixeli temsil eder.
• İki renkli görüntülerde Pixeller 0
ve 1 değerini alır
• 1 ve 0 değerleri aydınlık ve
karanlık bölgeleri, nesne ve
zemini temsil ederler.
www.serkanaksu.net
18
BİTMAP GRAFİK
Pixel
Video resimlerinde ışık seviyelerini
daha iyi derecelendirebilmek için
pixel başına 1 byte değer
kullanılır.
Bununla 0 (siyah) ile 255 (beyaz)
arasında tam sayılar elde edilir.
Ara değerlerde gri tonları olarak
isimlendirilir.
Grafik ve Animasyon
www.serkanaksu.net
19
BİTMAP GRAFİK
Pixel
Renkli resimlerde ise bu ara değerler,
(RGB = Red Green Blue) kırmızı,
yeşil, mavi, olan temel renklerin her
biri için m*n ‘lik bir diziye ihtiyaç
duyarlar.
Dolayısıyla her dizinin gri seviyeleri; kırmızı,
mavi ve yeşil pixelde, bileşenlerin şiddetini
belirler.
Buradan çıkarak 8 bitlik bir resimde,
her pixel 1 ve 0’lardan oluşan 8 bit ile
temsil edilir. Bu bitler 28 yani 256 renk
meydana getirir.
www.serkanaksu.net
20
BİTMAP GRAFİK
Temel Kavramlar
DPI (Dot Per Inch – İnch Başına Nokta Sayısı):
• Pixel’i oluşturan kırmızı, mavi ve yeşil renklerinden her
birine dot (nokta);
• Aynı renkli noktaların arasındaki uzaklığı belirleyen
ifadeye ise dot pitch ismi verilir.
www.serkanaksu.net
21
BİTMAP GRAFİK
Temel Kavramlar
DPI (Dot Per Inch – İnch Başına Nokta Sayısı):
• 1 inch(=2,54 cm) de noktalanan pixel sayısına dot per
inch adı verilir ki bu noktalama işlemi monitör, yazıcı ya
da tarayıcı gibi aygıtlarla gerçekleştirilir.
•
Inch başına düşen nokta sayısı azalırsa kalite kaybı olur,
nokta sayısının gereksiz artması ise kaliteli olur anlamına
gelmez. Gereksiz nokta artımı görüntü işlemeyi zorlaştırır,
dosya boyutu artar ve görüntü izlenme hızı düşer.
Grafik ve Animasyon
www.serkanaksu.net
22
BİTMAP GRAFİK
Temel Kavramlar
Çözünürlük (Resolution) : Bir defada ekranda
görüntülenebilen pixel sayısıdır. Örneğin; 800*600
çözünürlüğündeki ekranda 480000 adet pixel bulunmaktadır.
(PPI) Pixel Per Inch : Bir resmin pixel yoğunluğu yani PPI (=
Pixel Per Inch) 1 inch karede bulunan pixel sayısıdır.
Internette kullanılacak olan resimler için 72 PPI en ideal
ölçüdür.
www.serkanaksu.net
23
BİTMAP GRAFİK


Bu resim formatında
kayıt yapılırken, ikinci
satırın sekizinci noktası
kırmızı olacak gibi
bilgiler resmin tüm
noktaları için tekrarlanır.
BMP, TIFF, JPG, GIF
gibi formatlar bu yolla
kayıt yapar.
www.serkanaksu.net
24
Bitmap Nedir?

Bilgisayar ekranında (display space) bir resmi
görüntülemek için gereken tüm renk
bilgilerinin ekranı oluşturan her piksel (ekran
çözünürlülüğü dahilinde, adreslenebilir en
küçük resim parçası, pixel) için renk
bilgilerinin verildiği resim formatlarına verilen
genel addır.
www.serkanaksu.net
25
Bitmap Türleri


BMP, GIF, JPEG, JPG, PNG, PICT
(Macintosh), PCX, TGA, TIFF, PSD (Adobe
Photoshop).
Bitmap dosyaları ekranda görebilmek ve
yazıcılardan bastırabilmek için özel bazı
programlar gerekir (PhotoShop, XView,
Gimp, ACDSee vb).
www.serkanaksu.net
26
Bitmap Ölçeklendirme


Bitmap formatları, resmin çözünürlülüğüne
bağlı sabit bir tanımlama ile resmi oluştururlar
(Raster tekniği). Bu haliyle, eğer resmi
ölçeklendirirsek (küçültme/büyütme) bir çok
ayrıntıyı kaybedebiliriz.
Vektör bazlı grafik formatlarında ise,
tanımlamalar bağıl olduğu için
ölçeklendirmelerde kayıp önlenir (CAD
formatları, Post Script (PS, EPS) formatları
gibi).
www.serkanaksu.net
27
Bitmap Görüntü Kaybı

Küçük olarak
gördüğünüz sıradan bir
simge aslında her
noktası detaylı olarak
tanımlanmış bir bitmap
dosyadır. Büyütünce
gördüğümüz bu
noktalar dışında
arkaplan rengi de her
piksel için ayrı ayrı
tanımlanmıştır.
www.serkanaksu.net
28
Bitmap Görüntü Kaybı

Bitmap grafikler çözünürlükten bağımsız
olmadıkları için farklı boyutlarda aynı kalitede
görüntü veremeyebilirler. Resmi düzenlerken
eğer küçülterseniz bazı piksellerin
bilgilerinden feragat edilecek, eğer
büyütürseniz de yeni oluşturulan pikseller
çevresindekilere bakılarak tahmin edilmeye
çalışılacaktır. Bu nedenle resimlerinizi
yazıcıdan basarken beklemediğiniz boyut ve
kalite değişiklikleriyle karşılaşabilirsiniz.
www.serkanaksu.net
29
Bitmap Renk Derinliği

Temelde bitmap dosyalarda farklı renk
derinliklerinden biri seçilir:





Tek renk
16 renk (4 bit/piksel)
256 renk (8 bit/piksel)
16 milyon renk (24 bit/piksel)
Artık 16 milyon renk resimler standart
olmuştur.
www.serkanaksu.net
30
256 Renk (8 bit/piksel)


256 renk, 8 bit/piksellik resimler, örneğin GIF
dosyaları milyonlarca renk arasından, söz
konusu resimde kullandıklarını bir araya
toplayarak en fazla 256 renk barındıracak bir
palet oluştururlar.
640'a 480 piksel boyutlarda 8 bit bir grafik
dosyası yaklaşık 300 KB tutar ve yeterli
kalitede görüntü sunar ama gerçek renklerde
bir görüntü vermez.
www.serkanaksu.net
31
16 Milyon Renk (24 bit/piksel)



16 Milyon renk, 24 bitlik resimler ise her bir
piksel için üç ana rengin tonlarını kaydederler.
Mavi, yeşil ve kırmızı için 256’şar ayrı ton sunan
bu yolla 256x256x256 yani 16,7 milyon renge
ulaşırız.
Çoğu 24 bitlik resim aslında 32 bit olarak
kaydedilmekte, ekstra bir bit de o noktanın alpha
değerini (efekt özelliği) barındırmaktadır.
640x480 boyutlarında 24 bit’lik bir resim yaklaşık
920 KB yer tutar.
www.serkanaksu.net
32
Bitmap Türleri ve Özellikleri
BMP, CPT, PNG,
PSD, TGA, TIF
www.serkanaksu.net
BMP



Windows Bitmap formatı, Microsoft'un DOS
dünyasına grafikleri taşırken kullandığı,
Windows ve DOS ortamına özel başlıca
araçlardan biriydi.
24 bit renk derinliği sunan BMP artık pek
fazla kullanılmıyor.
BMP'nin saydamlık gibi özellikleri de
bulunmuyor.
www.serkanaksu.net
34
CPT



Corel PHOTO-PAINT'in kayıt formatlarından
biri olan CPT, şekilleri piksellerle betimleyerek
resmi oluşturur.
CorelDRAW CPT dosyalarını başka
dosyalara ekleyebilir ya da alabilir. Bu
dosyaların renkli ya da gri ölçekli olması
mümkündür.
Corel PHOTO-PAINT ile CPT olarak
kaydedilen dosyaların mask, lens, floating
objects özellikleri korunur.
www.serkanaksu.net
35
PNG


PNG hem gerçek renk derinliği için 24 bit
hem de -GIF gibi- sınırlı bir renk paletini
kullanarak 8 bit formatlarda kullanılabilir. Her
durumda kayıpsız kaydedilir.
Fazladan bir alpha kanalıyla orijinal dosyanın
katman özelliklerini de saklar (böyle
kaydedildiğinde RGB yerine RGBA resmi
olur).
www.serkanaksu.net
36
PNG’de Saydamlık

Piksel başına 48 bit'e varan kalitede görüntü
ile gerçek renk sunan, gri ölçekli resimleri de
piksel başına 16 bit bilgiyle kaydedebilen
PNG, GIF'ten daha farklı saydamlık özellikleri
sunuyor.Şu anda İnternet'te kullanılan temel
görüntü formatlarından biri, dosyalarınızı
kaydederken mutlaka göz önünde
bulundurun.
www.serkanaksu.net
37
PSD (Photoshop)

Grafik düzenleme programlarının en ünlüsü
Photoshop'ın dosyaları kaydederken kullandığı
kendi formatı da sadece bu nedenle dahi başlıca
formatlar arasında yer alıyor. PSD;
•
•
•
•
•
•
Daha fazla yer tutar,
Gerçek renk derinliğini başarıyla uygular,
Her zaman katman bilgisi barındırır,
Sıkıştırma kullanmaz ve
Saydamlık özelliği yok.
Photoshop'da devam ettiğiniz projeleri PSD olarak
tutmak bitmap detay kaybını önler.
www.serkanaksu.net
38
TGA

Truevision Targa sıkıştırma ile kaliteden
vazgeçip küçük boyutta dosyalar elde
edilebilen bir diğer format. Gerçek renk
derinliği ve katman bilgisi barındıran TGA
saydamlık seçeneği sunmuyor.
www.serkanaksu.net
39
TIF


Tagged Image Format birkaç firma tarafından
iddialı olarak geliştirilen, genişletilebilen
özellikler sunan bir çalışma.Saydamlık
özelliği olmayan TIF gerçek renk derinliğinde
katmanları destekliyor. Sıkıştırma ile iyi
sonuçlara ulaşabiliyorsunuz.
Çok renkle uğraştığınızda zaman önemli, yer
de çok önemli değilse, TIF'i kullanmanızda
fayda var.
www.serkanaksu.net
40
Internette Grafik Seçimi
JPG, JPEG (Joint Photographics
Experts Group)
 GIF Kullanımı GIF (Graphics
Interchange Format)

www.serkanaksu.net
Jpeg-Gif Arasındaki Temel Farklar
Jpeg
Çok renkle (256 renkten fazla) uğraştığınız
zaman GIF formatını kullanmanız mümkün
değil. BMP olarak saklarsanız, o kadar çok
disk alanı kaplar ki, Gigabyte-lık HD'ler
kullanmanız gerekebilir.
www.serkanaksu.net
42
Jpeg-Gif Arasındaki Temel Farklar
Jpeg
Onun yerine JPEG (Joint Photographics
Experts Group) daha iyi bir alternatif
olabilir.
Yalnız, JPEG az renk içeren
uygulamalarda hem kaliteyi düşürüyor,
hem de dosya boyutunda önemli bir
değişiklik sağlamıyor.
www.serkanaksu.net
43
Jpeg-Gif Arasındaki Temel Farklar
Jpeg
 Standart JPG formatında, resmin
kalitesinden bir miktar ödün vererek
sıkıştırma uygulanır. Böylece dosya boyu
bir hayli düşer. Özellikle 24 bit true color
uygulamalarda resim kalitesinin düştüğünü
anlamak mümkün değildir.
 Bu tip uygulamalarda JPG tercih edilir.
www.serkanaksu.net
44
Jpeg-Gif Arasındaki Temel Farklar
Jpeg
 JPEG'den ne kadar sıkıştırma istendiği (0100 arası bir faktör) seçiliyor ama
genellikle 5-95 arası kullanılıyor. 95'den
fazlası detay kaybına yol açıyor, 5'ten
küçüğü de dosyayı fazla ufaltmıyor)
 İkincisi de, 24 bit =>8 bit çevrim. JPG de,
GIF gibi, Web Listeleyiciler tarafından
görüntülenebilen standart bir formattır.
www.serkanaksu.net
45
Temel Fark
Gif



Gerçek renk derinliği isteyen, tonların
birbirine geçtiği görüntülerde JPG düşük
boyutlarda çok kaliteli görüntüler verir.
GIF ise aynı görüntü kalitesine ulaşamaz ve
daha yüksek boyutlarda kayıt yapar.
Az renk içeren uygulamalarda ise JPG hem
kaliteyi düşürür, hem de dosya boyutunda
önemli bir değişiklik sağlamaz.
www.serkanaksu.net
46
Jpg formatı
24 KB
Renklere
dikkat!
Gif formatı
112 KB
Dosya boyutuna
dikkat!
www.serkanaksu.net
47
JPG Renk Derinliği



JPEG formatı 24-bit renk derinliği sunar. Bu
da bir web sayfası için yeterli olacak kalitede
fotoğraf ve benzeri resimleri kullanmamızı
sağlar.
JPG'nin en büyük artılarından biri, kalite
oranının tamamen grafikere bırakılmasıdır.
Kaydederken sıkıştırma oranını, böylece de
kaliteden ne kadar feragat edileceğini siz
belirlersiniz.
www.serkanaksu.net
48
Jpeg-Gif Arasındaki Temel Fark


Her seferinde hesaplanıp yeniden oluşturulan
resimin kalitesini sıkıştırılma oranı belirler.
İlk sefer görüntülenen dosyanın aynısı değil,
kodlarının yorumu görüntülendiğinden JPG
dosyaların üstünde oynamalar yaptığınızda
aslında orijinal görüntüyü değiştiriyor
olmazsınız. Onun yerine derlenmiş,
yorumlanmış bilginin görüntüsünü elden
geçirmiş olursunuz.
Grafik ve Animasyon
www.serkanaksu.net
49
GIF Animasyon

GIF dosyası birkaç
görüntü barındırıp
böylece hareketli bir
animasyon sunabilir.
www.serkanaksu.net
50
GIF Transparan

Renklerin birbirine
karışmadığı kalitede
şeffaflık da GIF ile
mümkündür.
Görüntüdeki bir renk
transparan olarak
atanabilir.
www.serkanaksu.net
51
GIF Dosyalarının Değiştirilmesi


Bir GIF dosyasında değişiklik yaparken,
doğru rengi seçtiğinizden emin olsanız da
istediğiniz tonda bir değişiklik
yapamayabilirsiniz. Bunun nedeni, sınırlı renk
derinliğidir.
GIF dosyasının kaydedilmiş paletinde sizin
eklediğiniz renk yer almıyordur. Bu durumda
resmi gerçek renk derinliğine, yani RGB
moduna yükseltip değişiklikleri yapmalı,
sonra yeniden GIF olarak kaydetmelisiniz.
www.serkanaksu.net
52
Renk Paletini Yeniden Kaydetmek

Eğer resimden çeşitli bölümleri çıkartmış ya
da resmin bir bölümünü kesip görüntüyü
küçültmüşseniz belki de resim dosyasında
kaydedilmiş bazı renkleri dışarda
bırakmışsınızdır. Bu nedenle halihazırda
elinizde varolan dosyanın renk paletinde yer
alan renklerin bazıları gereksiz hale gelmiş
olabilir.
Grafik ve Animasyon
www.serkanaksu.net
53
Renk Paletini Yeniden Kaydetmek


Resmin renk derinliğini arttırıp sonra yeniden
düşürdüğünüzde program görüntüdeki
renkleri yeniden sayacaktır.
GIF olarak kaydederken program fazla olan
renkleri otomatikman düşürür. Böylece yeni
resminizin boyutu önemli oranlarda azalmış
olabilir.
Grafik ve Animasyon
www.serkanaksu.net
54
SVG
Scalable Vector Graphics
www.serkanaksu.net
55
SVG

Ölçeklenebilir vektörel grafikler (İngilizce:
Scalable Vector Graphics, SVG), XML
işaretleme dili kullanılarak iki boyutlu vektörel
grafik tanımlamakta kullanılan bir dildir.

Gerek sabit, gerekse hareketli (animasyon, hem
tanımlama hem de betikleme yoluyla) grafik
desteği mevcut olup, kullanıcı etkileşim desteği
de barındırır.
www.serkanaksu.net
56
SVG


Henüz yaygınlaşmamış olan ama üzerinde
yoğun çalışmalar yapılan bir vektör grafik
formatıdır.
GIF ve JPG dosyalarına Internet'te alternatif
olması için geliştirilen başlıca formatlardan
biri olan SVG dosyalarını bir metin editöründe
açıp inceleyebilir, XML dilini kullanarak
düzenleyebilirsiniz.
www.serkanaksu.net
57
SVG


SVG ile İnternet'ten sadece formülün indirilip,
görüntünün oluşturulması kullanıcının
bilgisayarına bırakılınca sayfalar daha hızlı
gelecektir.
Bu formatın çok daha derin renk özellikleri,
mükemmel piksel konumlandırması, daha
başarılı çıktılar sağlaması, sayısız yazı tipini
barındırıp hatta içindeki metinlerin
aranabilmesi söz konusudur.
www.serkanaksu.net
58
SVG




W3C SVG Çalışma Grubu tarafından 1998 yılında
geliştirilmeye başlanan SVG 1.0 kural seti, 4 Eylül 2001
tarihinde W3C tavsiyesi olarak kabul edildi.
Bazı önemli düzeltmeleri getiren SVG 1.1 ise W3C
tarafından 14 Ocak 2003 tarihinde kabul edildi.
Cep telefonları ve mobil cihazlar için önerilen SVG Tiny
kural setleri de uzun süredir W3C tavsiyesi olarak kabul
edilmiş durumda.
Söz konusu belirtimlerinin gelişkin ve güncelleştirilmiş
sürümü olan SVG Tiny 1.2, 28 Aralık 2008 tarihinde
onaylandı.
www.serkanaksu.net
59
SVG
SVG’nin Ortaya Çıkış Amacı
 Öyle bir altyapı tanımlanmalı ki; tüm çizim öğeleri, basit
bir metin düzenleyicisi (ör: Notepad) tarafından bile
düzenlenebilmeli. (rengi, özellikleri, her büküm noktası
değiştirilebilecek).
 Yöney çizimin tüm güçlü yanlarını içerirken, kullanıcı
etkileşimi, canlandırma, metin, resim içerebilmeli.
 Bağımsız bir dosya olarak saklanabilmeli, istenirse bu
kodlama, bir ağ sayfasına doğrudan (XHTML)
eklenebilmeli, bir yazılıma gömülebilmeli. Örneğin
javascript ile müdahale edilebilmeli.
www.serkanaksu.net
60
SVG
SVG’nin Ortaya Çıkış Amacı
 CSS gibi, standart haline gelmiş biçimlendirme
yöntemlerle çizimin içerisindeki her nesneye gereken
ortak özellikler dışarıdan atanabilmeli.
 Çizim içindeki metinler, arama motorları tarafından
bulunabilmeli, ses ve video eklenebilmeli.
www.serkanaksu.net
61
SVG
SVG’nin Özellikleri
 SVG üç türlü grafik nesneye olanak verir:
 Vektör grafik şekiller (örn: daireler, kareler, çizgiler…)
 Taramalı (raster) grafikler
 Yazılar
 Her üç tür grafik nesne gruplandırılabilir, dönüştürülebilir,
birleştirilebilir.
 SVG, XML işaretleme dili kullanılan tüm biçimlerde
olduğu gibi "sıkıştırılabilme" özelliğine sahiptir.
 gzip algoritmasıyla sıkıştırılarak SVGZ biçimini alan
vektörel çizimler, yüzde 20 oranında küçülmektedir.
www.serkanaksu.net
62
SVG
www.serkanaksu.net
63
SVG
http://tr.wikipedia.org/wiki/Dosya:Flag_of_Turkey.svg
<svg width="100" height="100">
<title>Merhaba Dunya</title>
<desc>Basit bir SVG ornegi</desc>
<circle cx="50" cy="50" r="50" style="stroke: black; fill:
none" />
</svg>
www.serkanaksu.net
64