{"id":9630,"date":"2021-09-22T07:57:33","date_gmt":"2021-09-22T07:57:33","guid":{"rendered":"https:\/\/turbologo.com\/tr\/blog\/?p=9630"},"modified":"2025-08-19T16:12:41","modified_gmt":"2025-08-19T16:12:41","slug":"svg-dosyasi","status":"publish","type":"post","link":"https:\/\/turbologo.com\/tr\/blog\/svg-dosyasi\/","title":{"rendered":"SVG dosyas\u0131 nedir? Nas\u0131l kullan\u0131laca\u011f\u0131na dair k\u0131lavuz"},"content":{"rendered":"\n<p>\u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri (SVG), \u00f6zel bir g\u00f6r\u00fcnt\u00fc format\u0131 t\u00fcr\u00fcd\u00fcr. SVG&#8217;ler <a href=\"https:\/\/turbologo.com\/tr\/blog\/goruntu-dosyasi-formatlari\/\">di\u011fer t\u00fcrler<\/a> gibi de\u011fildir. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz g\u00f6r\u00fcnt\u00fcleri olu\u015fturmak i\u00e7in benzersiz piksellere ba\u011fl\u0131 de\u011fildirler. Bunun yerine \u201cvekt\u00f6r\u201d verilerini kullan\u0131rlar.<\/p>\n\n\n\n<div class=\"wp-block-cover alignwide has-background-dim-80 has-background-dim\"><span class=\"bg-image preload-bg-image lazy-load-bg-img is-loaded is-ready\" data-src=\"https:\/\/assets.turbologo.com\/blog\/en\/2021\/05\/07203207\/background.png\" style=\"background-image: url(&quot;https:\/\/assets.turbologo.com\/blog\/en\/2021\/05\/07203207\/background.png&quot;);\"><\/span><noscript><span class=\"bg-image\" style=\"background-image:url(https:\/\/assets.turbologo.com\/blog\/en\/2021\/05\/07203207\/background.png)\" data-no-lazy=\"true\"><\/span><\/noscript><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\"><b>Saniyeler i\u00e7inde g\u00fczel bir logo tasar\u0131m\u0131 olu\u015ftur.<\/b> Logo tasar\u0131m\u0131 online \u00fccretsiz, tasar\u0131m yetene\u011fine gerek yok.<\/p>\n<a class=\"button\" href=\"https:\/\/turbologo.com\/tr\/logo-tasarim?utm_source=blog&amp;utm_campaign=article\" style=\"margin-top: 20px; min-width:200px; text-align:center;\">Logo olu\u015ftur<\/a>\n<\/div><\/div>\n\n\n\n<p>SVG&#8217;ler, g\u00f6r\u00fcnt\u00fcleri herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe kadar \u00f6l\u00e7eklendirmenize olanak tan\u0131r. Bu, web tasar\u0131m\u0131 ve di\u011fer bir\u00e7ok kullan\u0131m i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. \u201cSVG dosyas\u0131 nedir?\u201d Sorusuna cevap verece\u011fiz. Ard\u0131ndan, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 size g\u00f6sterece\u011fiz.<\/p>\n\n\n\n<h2>SVG Dosyas\u0131 nedir ve nas\u0131l kullan\u0131yorsunuz?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/assets.turbologo.com\/blog\/en\/2021\/07\/26040216\/svg-file.png\" alt=\"svg dosyas\u0131\" title=\"svg dosyas\u0131\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/tr.wikipedia.org\/wiki\/%C3%96l%C3%A7eklenebilir_Vekt%C3%B6r_Grafikleri\">SVG<\/a>, vekt\u00f6r tabanl\u0131 grafiklerdir. Vekt\u00f6r, belirli bir b\u00fcy\u00fckl\u00fc\u011f\u00fc ve y\u00f6n\u00fc olan bir elementtir.<\/p>\n\n\n\n<p>\u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri, iki boyutlu vekt\u00f6r grafiklerini tan\u0131mlamak i\u00e7in XML tabanl\u0131 bir i\u015faretlemedir. G\u00f6r\u00fcnt\u00fcleri tan\u0131mlayan metin tabanl\u0131 ve a\u00e7\u0131k bir Web standard\u0131d\u0131r. Herhangi bir boyutta i\u015flenebilirler. Metin i\u00e7in HTML neyse, grafik i\u00e7in de SVG odur.<\/p>\n\n\n\n<h2>Neden bir SVG dosyas\u0131 kullanmal\u0131s\u0131n\u0131z?<\/h2>\n\n\n\n<p>SVG, g\u00fcn\u00fcm\u00fcz\u00fcn en zor web geli\u015ftirme sorunlar\u0131n\u0131n \u00e7o\u011funu \u00e7\u00f6zebilir. Baz\u0131lar\u0131na bakal\u0131m.<\/p>\n\n\n\n<h3>Al\u0131c\u0131l\u0131k ve \u00f6l\u00e7eklenebilirlik<\/h3>\n\n\n\n<p>Kaputun alt\u0131nda SVG, taray\u0131c\u0131da grafikleri olu\u015fturmak i\u00e7in piksel \u0131zgaras\u0131 yerine \u015fekiller, say\u0131lar ve koordinatlar kullan\u0131r, bu da onu \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131z ve sonsuz \u00f6l\u00e7eklenebilir hale getirir. Dikkatlice bakarsan\u0131z, bir kalemle veya bir g\u00f6ky\u00fcz\u00fc yaz\u0131s\u0131 plan\u0131yla bir daire olu\u015fturabilirsiniz. Sadece \u00f6l\u00e7ek farkl\u0131.<\/p>\n\n\n\n<p>SVG, her boyutta net ve canl\u0131 g\u00f6rseller olu\u015fturmak i\u00e7in <a href=\"https:\/\/turbologo.com\/tr\/blog\/logodaki-sekillerin-psikolojisi\/\">farkl\u0131 \u015fekilleri<\/a>, yollar\u0131 ve metin \u00f6\u011felerini birle\u015ftirmenize olanak tan\u0131r.<\/p>\n\n\n\n<p>GIF, JPG ve PNG gibi raster tabanl\u0131 formatlar ise, \u00f6l\u00e7eklendi\u011finde pikselle\u015fmelerine neden olan sabit boyutlara sahiptir. Duyarl\u0131 g\u00f6r\u00fcnt\u00fc teknikleri piksel grafikler i\u00e7in kullan\u0131\u015fl\u0131 olsa da, SVG&#8217;nin yok edilemez \u00f6l\u00e7eklendirmesiyle asla rekabet edemeyeceklerdir.<\/p>\n\n\n\n<h3>Programlanabilirlik ve etkile\u015fim<\/h3>\n\n\n\n<p>SVG d\u00fczenlenebilir ve komut dosyas\u0131 yaz\u0131labilir. CSS veya JavaScript kullanarak SVG grafi\u011finize animasyonlar ve etkile\u015fimler ekleyebilirsiniz.<\/p>\n\n\n\n<h3>Ula\u015f\u0131labilirlik<\/h3>\n\n\n\n<p>SVG dosyalar\u0131 metin tabanl\u0131 olarak aranabilir ve indekslenebilir. Bunlara ekran okuyucular, arama motorlar\u0131 ve di\u011fer cihazlar taraf\u0131ndan eri\u015filebilir.<\/p>\n\n\n\n<h3>Verim<\/h3>\n\n\n\n<p><a href=\"https:\/\/turbologo.com\/tr\/blog\/standart-logo-boyutlari\/\">Bir web sitesindeki dosyalar\u0131n boyutu<\/a>, performans\u0131n\u0131 etkileyen temel fakt\u00f6rlerden biridir. SVG grafikleri, bitmap dosyalar\u0131ndan daha k\u00fc\u00e7\u00fck olma e\u011filimindedir.<\/p>\n\n\n\n<h2>Ortak SVG Kullan\u0131m \u00d6rnekleri ve Taray\u0131c\u0131 Deste\u011fi<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/assets.turbologo.com\/blog\/en\/2021\/07\/26041542\/svg-format.png\" alt=\"svg format\u0131\" title=\"svg format\u0131\"\/><\/figure>\n\n\n\n<p>SVG, \u00e7ok say\u0131da pratik uygulama sunar. En \u00f6nemlilerine bir g\u00f6z atal\u0131m.<\/p>\n\n\n\n<h3>Diyagramlar ve d\u00fcz \u00e7izimler<\/h3>\n\n\n\n<p>SVG, kalem ve kur\u015fun kalemle yap\u0131labilecek herhangi bir geleneksel \u00e7izim i\u00e7in m\u00fckemmel formatt\u0131r.<\/p>\n\n\n\n<h3>Simgeler ve logolar<\/h3>\n\n\n\n<p>SVG, d\u00fc\u011fmeler ve reklam panolar\u0131 gibi her boyutta keskin ve net simgeler ve logolar i\u00e7in idealdir. SVG simgelerinin bulunmas\u0131 da daha kolay ve daha kolay eri\u015filebilir.<\/p>\n\n\n\n<h3>Animasyonlar<\/h3>\n\n\n\n<p>SVG grafikleri \u00e7ekici animasyonlar olu\u015fturmak i\u00e7in kullan\u0131labilir. SVG kodu, hem JavaScript animasyonuyla hem de yerle\u015fik SMIL animasyon i\u015fleviyle etkile\u015fime girebilir.<\/p>\n\n\n\n<h3>Etkile\u015fim (tablolar ve grafikler, bilgi grafikleri veya haritalar)<\/h3>\n\n\n\n<p>SVG, verileri \u00e7izmek ve kullan\u0131c\u0131 eylemlerine veya di\u011fer olaylara g\u00f6re dinamik olarak g\u00fcncellemek i\u00e7in kullan\u0131labilir. Etkile\u015fimli SVG Bilgi Grafi\u011fi, Etkile\u015fimli SVG Yol Gezisi Haritas\u0131.<\/p>\n\n\n\n<h3>\u00d6zel efektler<\/h3>\n\n\n\n<p>SVG, \u015fekil de\u011fi\u015ftirme ve di\u011fer yap\u0131\u015fkan efektler gibi bir\u00e7ok canl\u0131 efekte sahip olabilir.<\/p>\n\n\n\n<h3>Uygulama ve aray\u00fcz tasar\u0131m\u0131<\/h3>\n\n\n\n<p>SVG, HTML5, web tabanl\u0131 uygulamalar ve zengin internet uygulamalar\u0131 (RIA) ile entegre edebilece\u011finiz karma\u015f\u0131k arabirimler olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n\n\n\n<p>SVG, g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi bir\u00e7ok durumda ve hemen hemen her yerde kullan\u0131labilir. T\u00fcm bunlarla ilgili iyi haber, caniuse.com&#8217;da kendiniz kontrol edebilece\u011finiz i\u00e7in SVG i\u00e7in taray\u0131c\u0131 deste\u011finin harika olmas\u0131d\u0131r.<\/p>\n\n\n\n<h2>SVG dosyas\u0131 olu\u015fturman\u0131n iki yolu<\/h2>\n\n\n\n<p>SVG dosyalar\u0131 iki \u015fekilde olu\u015fturulabilir. S\u0131f\u0131rdan olu\u015fturulabilir veya d\u00f6n\u00fc\u015ft\u00fcrebilece\u011finiz mevcut bir g\u00f6r\u00fcnt\u00fcden al\u0131nabilirler. Manuel y\u00f6ntemle ba\u015flayal\u0131m.<\/p>\n\n\n\n<h3>1. Manuel olarak bir SVG dosyas\u0131 olu\u015fturun<\/h3>\n\n\n\n<p>SVG dosyalar\u0131, daha \u00f6nce yapt\u0131\u011f\u0131m\u0131z gibi, genellikle vekt\u00f6r bilgilerini girmeye gerek kalmadan olu\u015fturulur. Bu sadece bir \u00f6rnekti. Bunun yerine, herhangi bir tasar\u0131m program\u0131 kullan\u0131larak SVG&#8217;ler olu\u015fturulabilir. Dosya bir SVG olarak kaydedilir. SVG&#8217;ler bir\u00e7ok modern grafik tasar\u0131m arac\u0131 taraf\u0131ndan desteklenir. Bunlar en iyi se\u00e7eneklerden baz\u0131lar\u0131:<\/p>\n\n\n\n<ul><li>Adobe Illustrator, Photoshop ve InDesign<\/li><li>Microsoft Visio&#8217;su<\/li><li>Inkscape<\/li><li>GIMP<\/li><\/ul>\n\n\n\n<p>Bu iki a\u00e7\u0131k kaynakl\u0131 \u00e7\u00f6z\u00fcm, bu listedeki son ikisidir. Premium yaz\u0131l\u0131m i\u00e7in \u00f6deme yapmak zorunda kalmadan SVG olu\u015fturmay\u0131 denemenin harika bir yoludur. Hatta ihtiyac\u0131n\u0131z olan her \u015fey olabilirler.<\/p>\n\n\n\n<p>Grafik tasar\u0131m deneyiminiz yoksa web siteniz i\u00e7in <a href=\"https:\/\/turbologo.com\/tr\/logo-tasarim\">logolar<\/a> ve di\u011fer \u00f6\u011feleri olu\u015fturmak zor olabilir. Bunlar\u0131 SVG&#8217;lere d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in mevcut g\u00f6r\u00fcnt\u00fcleri kullanabilirsiniz.<\/p>\n\n\n\n<h3>2. Mevcut G\u00f6r\u00fcnt\u00fcleri SVG&#8217;lere D\u00f6n\u00fc\u015ft\u00fcr\u00fcn<\/h3>\n\n\n\n<p>Bir\u00e7ok \u00fccretsiz program ile farkl\u0131 formatlardaki g\u00f6r\u00fcnt\u00fcleri SVG&#8217;lere d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. \u00d6nceki b\u00f6l\u00fcmde bahsedilen yaz\u0131l\u0131mlar\u0131n \u00e7o\u011fu, g\u00f6r\u00fcnt\u00fcleri a\u00e7man\u0131za ve SVG olarak kaydetmenize olanak tan\u0131r.<\/p>\n\n\n\n<p>Herhangi bir yaz\u0131l\u0131m indirmek istemiyorsan\u0131z, \u00e7evrimi\u00e7i d\u00f6n\u00fc\u015ft\u00fcrme ara\u00e7lar\u0131 da mevcuttur. Kullanabilece\u011finiz bir\u00e7ok hizmet var. Bir \u00f6rnek, her t\u00fcr dosya t\u00fcr\u00fcn\u00fc SVG&#8217;lere d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullanabilece\u011finiz Vector Magic&#8217;tir:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/assets.turbologo.com\/blog\/en\/2021\/07\/26042822\/vector-magic.psd.png\" alt=\"vector magic \" title=\"vector magic \"\/><\/figure>\n\n\n\n<p>Bu ara\u00e7 harika \u00e7\u00fcnk\u00fc SVG dosyas\u0131n\u0131 ger\u00e7ekten indirmeden \u00f6nce size bir \u00f6nizleme sa\u011fl\u0131yor. Yerle\u015fik d\u00fczenleyici, dosyay\u0131 indirmeden \u00f6nce k\u00fc\u00e7\u00fck de\u011fi\u015fiklikler yapman\u0131z\u0131 sa\u011flar.<\/p>\n\n\n\n<p>Bu sadece bir se\u00e7enek. Convertio ve Img2Go, di\u011fer PNG ve JPG-SVG d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc hizmetleridir. Sizin i\u00e7in en iyi \u00e7\u00f6z\u00fcm\u00fc bulmak i\u00e7in ara\u015ft\u0131rmak \u00f6nemlidir.<\/p>\n\n\n\n<p>\u00c7o\u011fu SVG d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fcn\u00fcn benzer sonu\u00e7lar \u00fcretti\u011fini bulduk. Se\u00e7ti\u011finiz g\u00f6r\u00fcnt\u00fcler, en iyi sonu\u00e7lar\u0131 elde etmek i\u00e7in kulland\u0131\u011f\u0131n\u0131z d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc kadar \u00f6nemlidir.<\/p>\n\n\n\n<p>SVG&#8217;yi basit g\u00f6r\u00fcnt\u00fcler i\u00e7in kullanmak en iyisidir, yani net \u00e7izgileri ve tan\u0131mlanm\u0131\u015f s\u0131n\u0131rlar\u0131 olan g\u00f6r\u00fcnt\u00fcler. G\u00f6r\u00fcnt\u00fcn\u00fcz\u00fcn ne kadar karma\u015f\u0131k oldu\u011funa ba\u011fl\u0131 olarak, muhtemelen d\u00fczenlemesi veya canland\u0131rmas\u0131 zor olan b\u00fcy\u00fck bir SVG dosyas\u0131 elde edeceksiniz.<\/p>\n\n\n\n<h2>Bir SVG dosyas\u0131 nas\u0131l kullan\u0131l\u0131r (WordPress \u0130\u00e7inde ve D\u0131\u015f\u0131nda)<\/h2>\n\n\n\n<p>SVG&#8217;ler kolayca kullan\u0131labilir. Bir SVG dosyas\u0131n\u0131, kodunu kopyalay\u0131p g\u00f6r\u00fcnt\u00fcy\u00fc istedi\u011finiz yere bir HTML belgesine yap\u0131\u015ft\u0131rarak web sitenize eklemek kolayd\u0131r.<\/p>\n\n\n\n<p>Siz ve sitenizin ziyaret\u00e7ileri SVG dosyalar\u0131n\u0131 destekleyen taray\u0131c\u0131lar kullan\u0131yorsan\u0131z (ve bu g\u00fcnlerde \u00e7o\u011fu bunu yap\u0131yor), \u00f6\u011feyi g\u00f6rebilirler. SVG&#8217;ler CSS kullan\u0131larak canland\u0131r\u0131labildi\u011finden daha zordur.<\/p>\n\n\n\n<p>Ancak, WordPress kullan\u0131c\u0131lar\u0131 s\u00fcre\u00e7te bir de\u011fi\u015fiklik ya\u015fayacaklard\u0131r. SVG&#8217;ler, \u0130\u00e7erik Y\u00f6netim Sistemi (CMS) taraf\u0131ndan desteklenmez. Dosyalar\u0131 do\u011frudan web sitenize y\u00fckleyebilmek i\u00e7in SVG deste\u011fini etkinle\u015ftirmek istiyorsan\u0131z, <a href=\"https:\/\/wordpress.org\/support\/plugin\/safe-svg\/\">Safe SVG<\/a> gibi bir eklenti kullanmak isteyeceksiniz.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/assets.turbologo.com\/blog\/en\/2021\/07\/26044051\/Safe-SVG-1024x453-1.png\" alt=\"Safe SVG\" title=\"Safe SVG\"\/><\/figure>\n\n\n\n<p>WordPress&#8217;te SVG deste\u011fini manuel olarak etkinle\u015ftirmek de m\u00fcmk\u00fcnd\u00fcr, ancak s\u00fcre\u00e7 \u00e7ok daha karma\u015f\u0131kt\u0131r. Bu gibi durumlarda, bir eklenti daha g\u00fcvenlidir.<\/p>\n\n\n\n<!-- \u0421\u043a\u0440\u044b\u0442\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u043e\u0432 -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"SVG dosyas\u0131 nedir?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"SVG (Scalable Vector Graphics), XML tabanl\u0131 vekt\u00f6r grafik bi\u00e7imidir. \u015eekiller, yollar, metin ve gradyanlar matematiksel olarak tan\u0131mlan\u0131r; \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131zd\u0131r ve kay\u0131ps\u0131z \u00f6l\u00e7eklenir.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"SVG nas\u0131l a\u00e7\u0131l\u0131r ve d\u00fczenlenir?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"Vekt\u00f6r d\u00fczenleyiciler (Illustrator, Figma, Inkscape) veya kod edit\u00f6rleriyle a\u00e7\u0131l\u0131r. Web ikonlar\u0131 ve logolar i\u00e7in idealdir; yaz\u0131 tipleri g\u00f6m\u00fclebilir ya da ana hatlara (outlines) d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilir.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"SVG ile PNG\/JPG aras\u0131ndaki fark nedir?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"SVG vekt\u00f6rd\u00fcr, s\u0131n\u0131rs\u0131z \u00f6l\u00e7eklenir ve keskin kal\u0131r; d\u00fcz renkli \u015fekiller\/ikonlar\/logolar i\u00e7in uygundur. PNG\/JPG rasterdir; foto\u011fraflar ve dokulu g\u00f6rseller i\u00e7in tercih edilir, b\u00fcy\u00fctmede kalite kayb\u0131 olur.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Web\u2019de SVG nas\u0131l kullan\u0131l\u0131r?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"IMG etiketiyle (img src=\\\"logo.svg\\\" alt=\\\"Marka\\\"), CSS arka plan\u0131 olarak veya inline <svg> ile g\u00f6m\u00fcl\u00fcr. Inline kullan\u0131mda fill\/stroke CSS ile stillenir; eri\u015filebilirlik i\u00e7in alt\/aria-label veya <title> ekleyin.\"\n      }\n    },\n    {\n      \"@type\": \"Question\",\n      \"name\": \"SVG nas\u0131l optimize edilir ve g\u00fcvenli hale getirilir?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"SVGO gibi ara\u00e7larla gereksiz metadata\/\u00f6znitelikleri kald\u0131r\u0131n, yollar\u0131 basitle\u015ftirin. viewBox tan\u0131mlay\u0131n, gerekirse geni\u015flik\/y\u00fcksekli\u011fi kald\u0131rarak duyarl\u0131 yap\u0131n. Harici referanslar ve betikler gibi g\u00fcvenlik risklerini temizleyin.\"\n      }\n    }\n  ]\n}\n<\/script>\n\n<!-- \u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442: h2 + \u0436\u0438\u0440\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b -->\n<h2>SVG Dosyas\u0131 \u2014 S\u0131k Sorulan Sorular<\/h2>\n\n<p><strong>SVG dosyas\u0131 nedir?<\/strong><\/p>\n<p>XML tabanl\u0131 vekt\u00f6r formatt\u0131r; \u015fekiller\/metin matematiksel tan\u0131ml\u0131d\u0131r, \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131z \u00f6l\u00e7eklenir.<\/p>\n\n<p><strong>SVG nas\u0131l a\u00e7\u0131l\u0131r ve d\u00fczenlenir?<\/strong><\/p>\n<p>Illustrator\/Figma\/Inkscape veya kod edit\u00f6r\u00fcyle; yaz\u0131 tiplerini g\u00f6m\u00fcn ya da outlines\u2019a \u00e7evirin.<\/p>\n\n<p><strong>SVG ile PNG\/JPG fark\u0131 nedir?<\/strong><\/p>\n<p>SVG vekt\u00f6r (ikon\/logo i\u00e7in ideal), PNG\/JPG raster (foto\/doku i\u00e7in). Raster b\u00fcy\u00fctmede kalite kaybeder.<\/p>\n\n<p><strong>Web\u2019de SVG nas\u0131l kullan\u0131l\u0131r?<\/strong><\/p>\n<p><code>&lt;img src=\"logo.svg\" alt=\"Marka\"&gt;<\/code>, CSS arka plan\u0131 veya inline <code>&lt;svg&gt;<\/code>; inline\u2019da <code>fill<\/code>\/<code>stroke<\/code> ile stillenir.<\/p>\n\n<p><strong>SVG nas\u0131l optimize edilir ve g\u00fcvenli hale getirilir?<\/strong><\/p>\n<p>SVGO ile k\u00fc\u00e7\u00fclt\u00fcn, gereksiz \u00f6\u011feleri temizleyin; <code>viewBox<\/code> ekleyin, harici referans\/betikleri kald\u0131r\u0131n.<\/p>\n\n\n\n\n<h2>\u00c7\u00f6z\u00fcm<\/h2>\n\n\n\n<p>Web sitenizi SVG dosyalar\u0131na uyarlamak d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczden daha kolayd\u0131r. SVG&#8217;ler olu\u015fturmak veya d\u00f6n\u00fc\u015ft\u00fcr\u00fclecek do\u011fru g\u00f6r\u00fcnt\u00fcleri se\u00e7mek kolay de\u011fildir. Her ikisini de ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131labilecek bir\u00e7ok ara\u00e7 vard\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri (SVG), \u00f6zel bir g\u00f6r\u00fcnt\u00fc format\u0131 t\u00fcr\u00fcd\u00fcr. SVG&#8217;ler di\u011fer t\u00fcrler gibi de\u011fildir. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz g\u00f6r\u00fcnt\u00fcleri olu\u015fturmak i\u00e7in benzersiz piksellere&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9632,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SVG dosyas\u0131 nedir? Nas\u0131l kullan\u0131laca\u011f\u0131na dair k\u0131lavuz | Turbologo<\/title>\n<meta name=\"description\" content=\"SVG nedir? SVG, \u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri anlam\u0131na gelir. Kolayca \u00f6l\u00e7eklenebilen bir dosya format\u0131d\u0131r. T\u00fcm modern taray\u0131c\u0131larda desteklenir ve bir\u00e7ok avantaj\u0131 vard\u0131r. SVG format\u0131 hakk\u0131nda daha fazla bilgi edinmek i\u00e7in okumaya devam edin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/turbologo.com\/tr\/blog\/svg-dosyasi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG dosyas\u0131 nedir? Nas\u0131l kullan\u0131laca\u011f\u0131na dair k\u0131lavuz | Turbologo\" \/>\n<meta property=\"og:description\" content=\"SVG nedir? SVG, \u00d6l\u00e7eklenebilir Vekt\u00f6r Grafikleri anlam\u0131na gelir. Kolayca \u00f6l\u00e7eklenebilen bir dosya format\u0131d\u0131r. T\u00fcm modern taray\u0131c\u0131larda desteklenir ve bir\u00e7ok avantaj\u0131 vard\u0131r. SVG format\u0131 hakk\u0131nda daha fazla bilgi edinmek i\u00e7in okumaya devam edin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/turbologo.com\/tr\/blog\/svg-dosyasi\/\" \/>\n<meta property=\"og:site_name\" content=\"Logo tasar\u0131m\u0131 ve markalama - Resmi Turbologo blogu\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-22T07:57:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-19T16:12:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.turbologo.com\/blog\/tr\/2021\/09\/22075119\/svg-file.png\" \/>\n\t<meta property=\"og:image:width\" content=\"958\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Ilya Lavrov\">\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\">\n\t<meta name=\"twitter:data2\" content=\"6 dakika\">\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/posts\/9630"}],"collection":[{"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/comments?post=9630"}],"version-history":[{"count":7,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/posts\/9630\/revisions"}],"predecessor-version":[{"id":10706,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/posts\/9630\/revisions\/10706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/media\/9632"}],"wp:attachment":[{"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/media?parent=9630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/categories?post=9630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/turbologo.com\/tr\/blog\/wp-json\/wp\/v2\/tags?post=9630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}