HTML5 SVG - Yusuf SEZER

Trang chủ » Html Grafik Ekleme » HTML5 SVG - Yusuf SEZER

Có thể bạn quan tâm

  1. Anasayfa
  2. HTML
  3. HTML5 SVG

HTML5 ile birlikte gelen özelliklerden birisi olan SVG dili ile ilgili bilgiler SVG kullanımı ve SVG örnekleri yer alıyor.

SVG nedir

  • SVG açılımı Scalable Vector Graphics ( Ölçeklenebilir Vektörel Grafikler )
  • Web sayfalarında grafik oluşturmak için kullanılır.
  • HTML geliştiricileri tarafından önerilir
  • JavaScript kullanımına ihtiyaç yoktur.

HTML5 <svg> etiketi SVG grafikleri için taşıyıcı görevi görür.

SVG etiketi ile çizgi, dikdörtgen, çember, daire vb. çizim yöntemleri vardır.

SVG çember ve daire çizmek

<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>SVG Örnekleri</title> </head> <body> <svg width="200" height="200"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="white" /> <circle cx="150" cy="50" r="40" stroke="black" stroke-width="4" fill="blue" /> </svg> </body> </html>

SVG dikdörtgen

<svg width="400" height="100">   <rect width="400" height="100" stroke="black" fill="blue" stroke-width="10" /> </svg>

SVG yuvarlak dikdörtgen

<svg width="400" height="180">   <rect x="50" y="20" rx="20" ry="20" width="150" height="150"   style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" /> </svg>

SVG polygon yıldız

<svg width="300" height="200">   <polygon points="100,10 40,198 190,78 10,78 160,198"   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

SVG örnek

<svg height="130" width="500">   <defs>     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />     </linearGradient>   </defs>   <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />   <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> </svg>

SVG ve Canvas arasındaki farklar

SVG XML tabanlı grafik çizimi için kullanılan bir dildir.

Canvas JavaScript ile grafik çizimi yapmak için kullanılan bir etikettir.

SVG XML tabanlı olduğundan SVG etiketlerine JavaScript DOM ile olay (tıklama, üzerine gelme vb.) ekleyebiliriz.

SVG ve Canvas karşılaştırması

CanvasSVG
  • Sayfayı yakınlaştırınca çözünürlük bozulur.
  • Çizim nesnelerine JavaScript olayı eklenemez.
  • Çizim .png veya .jpg olarak kaydedilebilir.
  • Yoğun grafik işlemi olan oyunlar için uygundur.
  • Sayfayı yakınlaştırınca çözünürlük bozulmaz.
  • Çizim nesnelerine JavaScript olayı eklenebilir.
  • Çizim .png veya .jpg olarak kaydedilemez.
  • Yoğun grafik işlemi olan oyunlar için uygun değildir.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Facebook Linkedin X WhatsApp Telegram E-Posta ile paylaş Yazdır

Bunlarda ilgini çekebilir

HTML5 Server-Sent Events HTML5 WebSocket HTML5 form Elemanları HTML5 input Tipleri HTML5 input Özellikleri
Yusuf Sezer
yusufsezer.com
HTML5 Dersleri CSS3 Dersleri Responsive Web Tasarım JavaScript Dersleri Git Dersleri MongoDB Dersleri Node.js Dersleri SQL Dersleri MySQL Dersleri PostgreSQL Dersleri Oracle Dersleri PHP Dersleri Web Servis Dersleri Linux Dersleri Programlama Örnekleri C++ Dersleri .NET Dersleri Java Dersleri Yazılım Mühendisliği Dersleri Mikroservis Dersleri Yapay Zeka Dersleri Açık Kaynak Blockchain Dersleri PostgreSQL BakımPostgreSQL Partition Nedir? KullanımıPostgreSQL Veri TipleriPostgreSQL CTEPostgreSQL Tarih Saat İşlemleri ve Fonksiyonları WhatsApp gurubuna katıl.

Từ khóa » Html Grafik Ekleme