{"id":37762,"date":"2026-01-14T18:41:38","date_gmt":"2026-01-14T15:41:38","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37762"},"modified":"2026-01-14T18:41:38","modified_gmt":"2026-01-14T15:41:38","slug":"svgde-radyal-gradyanlara-giris","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/","title":{"rendered":"SVG’de Radyal Gradyanlara Giri\u015f"},"content":{"rendered":"

<\/p>\n

Web tasar\u0131m\u0131nda ve grafiklerde estetik ve derinlik katman\u0131n en etkili yollar\u0131ndan biri gradyanlard\u0131r. Gradyanlar, bir renkten di\u011ferine veya bir rengin farkl\u0131 tonlar\u0131 aras\u0131nda p\u00fcr\u00fczs\u00fcz ge\u00e7i\u015fler olu\u015fturarak g\u00f6rsel \u00f6\u011felere zenginlik katar. SVG (Scalable Vector Graphics), bu t\u00fcr g\u00f6rsel efektleri tan\u0131mlamak ve kullanmak i\u00e7in g\u00fc\u00e7l\u00fc yetenekler sunar. Bu rehberde, SVG’nin radyal gradyan \u00f6zelliklerini derinlemesine inceleyecek, temelden ileri seviyeye kadar t\u00fcm detaylar\u0131 ele alacak ve pratik \u00f6rneklerle peki\u015ftirece\u011fiz.<\/p>\n

SVG’de Radyal Gradyanlara Giri\u015f<\/h2>\n

Gradiyanlar, temel olarak iki kategoriye ayr\u0131l\u0131r: lineer (do\u011frusal) ve radyal (dairesel). Lineer gradyanlar, bir \u00e7izgi boyunca renk ge\u00e7i\u015fi sa\u011flarken, radyal gradyanlar bir merkez noktadan d\u0131\u015fa do\u011fru yay\u0131lan dairesel veya eliptik bir renk ge\u00e7i\u015fi olu\u015fturur. Bu dairesel yap\u0131, nesnelere hacim, derinlik ve \u0131\u015f\u0131k kayna\u011f\u0131 hissi vermek i\u00e7in idealdir. \u00d6rne\u011fin, bir topun yuvarlakl\u0131\u011f\u0131n\u0131 vurgulamak veya bir d\u00fc\u011fmeye 3 boyutlu bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in radyal gradyanlar vazge\u00e7ilmezdir.<\/p>\n

SVG’de gradyanlar, do\u011frudan \u015fekillerin i\u00e7ine g\u00f6m\u00fclmek yerine, genellikle SVG dosyas\u0131n\u0131n <\/code> (definitions) b\u00f6l\u00fcm\u00fcnde tan\u0131mlan\u0131r. Bu, gradyanlar\u0131n bir kez tan\u0131mlan\u0131p birden fazla \u015fekil taraf\u0131ndan yeniden kullan\u0131labilmesini sa\u011flar, bu da kod tekrar\u0131n\u0131 azalt\u0131r ve y\u00f6netimi kolayla\u015ft\u0131r\u0131r. Bir gradyan tan\u0131mland\u0131ktan sonra, fill<\/code> veya stroke<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla herhangi bir SVG \u015fekline referans verilerek uygulanabilir.<\/p>\n

Radyal gradyanlar, <\/code> elementi ile tan\u0131mlan\u0131r ve bir dizi parametre ile \u00f6zelle\u015ftirilir. Bu parametreler, gradyan\u0131n merkezini, yar\u0131\u00e7ap\u0131n\u0131, odak noktas\u0131n\u0131 ve renk duraklar\u0131n\u0131 belirlememizi sa\u011flar. \u015eimdi bu elementin temel \u00f6zelliklerini daha yak\u0131ndan inceleyelim.<\/p>\n

Elementinin Temelleri<\/h2>\n

SVG’de bir radyal gradyan olu\u015fturmak i\u00e7in <\/code> elementini kullan\u0131r\u0131z. Bu element, gradyan\u0131n genel yap\u0131s\u0131n\u0131 ve davran\u0131\u015f\u0131n\u0131 tan\u0131mlayan \u00e7e\u015fitli \u00f6zelliklere sahiptir. En temel \u00f6zellikler \u015funlard\u0131r:<\/p>\n

    \n
  • id<\/code>: Gradyan\u0131 benzersiz bir \u015fekilde tan\u0131mlayan bir isimdir. Di\u011fer SVG elementlerinin bu gradyan\u0131 kullanabilmesi i\u00e7in bu ID’ye ihtiyac\u0131 vard\u0131r.<\/li>\n
  • cx<\/code>, cy<\/code>: Gradyan dairesinin merkez noktas\u0131n\u0131n x ve y koordinatlar\u0131d\u0131r. Varsay\u0131lan de\u011ferler 50%<\/code>‘dir.<\/li>\n
  • r<\/code>: Gradyan dairesinin yar\u0131\u00e7ap\u0131d\u0131r. Varsay\u0131lan de\u011fer 50%<\/code>‘dir.<\/li>\n
  • fx<\/code>, fy<\/code>: Gradyan\u0131n odak noktas\u0131 (focal point) veya \u0131\u015f\u0131k kayna\u011f\u0131 olarak da adland\u0131r\u0131lan noktan\u0131n x ve y koordinatlar\u0131d\u0131r. Bu nokta, renk ge\u00e7i\u015finin ba\u015flad\u0131\u011f\u0131 yerdir. Varsay\u0131lan de\u011ferler cx<\/code> ve cy<\/code> ile ayn\u0131d\u0131r.<\/li>\n<\/ul>\n

    Renk ge\u00e7i\u015finin kendisi, <\/code> elementi i\u00e7inde yer alan <\/code> elementleri ile tan\u0131mlan\u0131r. Her <\/code> elementi, gradyan \u00fczerinde belirli bir noktada bir rengi ve \u015feffafl\u0131\u011f\u0131 temsil eder:<\/p>\n

      \n
    • offset<\/code>: Renk dura\u011f\u0131n\u0131n gradyan i\u00e7indeki konumunu belirler. 0<\/code>‘dan 1<\/code>‘e kadar bir de\u011fer al\u0131r (veya 0%<\/code>‘den 100%<\/code>‘e kadar). 0<\/code>, gradyan\u0131n ba\u015flang\u0131c\u0131n\u0131 (odak noktas\u0131n\u0131), 1<\/code> ise gradyan\u0131n biti\u015fini (yar\u0131\u00e7ap\u0131n\u0131) temsil eder.<\/li>\n
    • stop-color<\/code>: Bu duraktaki rengi belirler (\u00f6rn: #FF0000<\/code>, blue<\/code>, rgb(255,0,0)<\/code>).<\/li>\n
    • stop-opacity<\/code>: Bu duraktaki rengin \u015feffafl\u0131\u011f\u0131n\u0131 belirler (0<\/code>‘dan 1<\/code>‘e kadar bir de\u011fer).<\/li>\n<\/ul>\n

      Basit Bir Radyal Gradyan \u00d6rne\u011fi<\/h3>\n

      A\u015fa\u011f\u0131daki \u00f6rnek, merkezden d\u0131\u015fa do\u011fru beyazdan siyaha do\u011fru yumu\u015fak bir ge\u00e7i\u015f yapan basit bir radyal gradyan\u0131 g\u00f6sterir. Bu gradyan, bir daire \u015fekline uygulanm\u0131\u015ft\u0131r.<\/p>\n

      \n  \n    \n      \n      \n    <\/radialGradient>\n  <\/defs>\n\n  \n<\/svg><\/code><\/pre>\n
      Bu \u00f6rnekte, <\/code> elementinin id<\/code>‘si \"beyazdanSiyaha\"<\/code> olarak belirlenmi\u015ftir. Gradyan\u0131n merkezi (cx<\/code>, cy<\/code>) ve yar\u0131\u00e7ap\u0131 (r<\/code>) varsay\u0131lan de\u011ferler olan 50%<\/code> olarak ayarlanm\u0131\u015ft\u0131r. Odak noktas\u0131 (fx<\/code>, fy<\/code>) da merkezle ayn\u0131d\u0131r, bu da gradyan\u0131n tam merkezden ba\u015flay\u0131p dairesel olarak yay\u0131ld\u0131\u011f\u0131 anlam\u0131na gelir. \u0130ki <\/code> elementi, gradyan\u0131n ba\u015flang\u0131c\u0131nda beyaz (offset=\"0%\"<\/code>) ve biti\u015finde siyah (offset=\"100%\"<\/code>) olaca\u011f\u0131n\u0131 belirtir.<\/p>\n
      Radyal Gradyanlar\u0131n \u00d6zellikleri ve Kullan\u0131m\u0131<\/h2>\n
      Radyal gradyanlar, temel \u00f6zelliklerinin \u00f6tesinde daha karma\u015f\u0131k ve kontrol edilebilir hale getirilebilir. \u0130\u015fte bu kontrol\u00fc sa\u011flayan baz\u0131 \u00f6nemli \u00f6zellikler:<\/p>\n
      gradientUnits<\/code>: Koordinat Sistemi<\/h3>\n
      gradientUnits<\/code> \u00f6zelli\u011fi, gradyan\u0131n koordinat sistemini belirler ve gradyan\u0131n boyutunun ve konumunun nas\u0131l yorumlanaca\u011f\u0131n\u0131 kontrol eder. \u0130ki olas\u0131 de\u011feri vard\u0131r:<\/p>\n
        \n
      • objectBoundingBox<\/code> (varsay\u0131lan): Gradyan, gradyan\u0131n uyguland\u0131\u011f\u0131 elementin s\u0131n\u0131rlay\u0131c\u0131 kutusuna g\u00f6re boyutland\u0131r\u0131l\u0131r ve konumland\u0131r\u0131l\u0131r. cx<\/code>, cy<\/code>, r<\/code>, fx<\/code>, fy<\/code> de\u011ferleri 0<\/code> ile 1<\/code> aras\u0131nda (veya 0%<\/code> ile 100%<\/code> aras\u0131nda) oranlar olarak yorumlan\u0131r. Bu, gradyan\u0131n uyguland\u0131\u011f\u0131 nesnenin boyutuna g\u00f6re otomatik olarak \u00f6l\u00e7eklenmesini sa\u011flar.<\/li>\n
      • userSpaceOnUse<\/code>: Gradyan, mevcut kullan\u0131c\u0131 koordinat sistemine g\u00f6re boyutland\u0131r\u0131l\u0131r ve konumland\u0131r\u0131l\u0131r. cx<\/code>, cy<\/code>, r<\/code>, fx<\/code>, fy<\/code> de\u011ferleri mutlak piksel birimleri olarak yorumlan\u0131r. Bu, gradyan\u0131n belirli bir boyutta ve konumda kalmas\u0131n\u0131, uyguland\u0131\u011f\u0131 nesnenin boyutundan ba\u011f\u0131ms\u0131z olmas\u0131n\u0131 istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ul>\n
        gradientUnits<\/code> \u00d6rne\u011fi<\/h4>\n
        A\u015fa\u011f\u0131daki \u00f6rnekte, ayn\u0131 gradyan\u0131n farkl\u0131 gradientUnits<\/code> de\u011ferleriyle nas\u0131l davrand\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz:<\/p>\n
        \n  \n    \n      \n      \n    <\/radialGradient>\n  <\/defs>\n\n  \n  \n\n  \n  \n    \n    \n  <\/radialGradient>\n  \n<\/svg><\/code><\/pre>\n
        \u0130lk dikd\u00f6rtgen, gradyan\u0131 kendi boyutlar\u0131na g\u00f6re \u00f6l\u00e7eklerken, ikinci dikd\u00f6rtgendeki gradyan, SVG’nin genel koordinat sisteminde belirli bir boyutta ve konumda kal\u0131r, dikd\u00f6rtgenin boyutundan ba\u011f\u0131ms\u0131zd\u0131r.<\/p>\n
        gradientTransform<\/code>: Gradyan\u0131 D\u00f6n\u00fc\u015ft\u00fcrme<\/h3>\n
        gradientTransform<\/code> \u00f6zelli\u011fi, t\u0131pk\u0131 di\u011fer SVG elemanlar\u0131nda oldu\u011fu gibi, gradyan\u0131n kendisine d\u00f6n\u00fc\u015f\u00fcmler (ta\u015f\u0131ma, \u00f6l\u00e7ekleme, d\u00f6nd\u00fcrme, e\u011fme) uygulaman\u0131za olanak tan\u0131r. Bu, gradyan\u0131 \u015feklin i\u00e7inde istedi\u011finiz gibi konumland\u0131rmak veya yeniden boyutland\u0131rmak i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n
        gradientTransform<\/code> \u00d6rne\u011fi<\/h4>\n
        \n  \n    \n      \n      \n    <\/radialGradient>\n  <\/defs>\n\n  \n<\/svg><\/code><\/pre>\n
        Bu \u00f6rnekte, gradyan \u00f6nce 0.8<\/code> oran\u0131nda \u00f6l\u00e7eklenir, ard\u0131ndan x<\/code> ve y<\/code> eksenlerinde 10<\/code> birim ta\u015f\u0131n\u0131r. Bu, gradyan\u0131n normalde dolduraca\u011f\u0131 alan\u0131 k\u00fc\u00e7\u00fclt\u00fcr ve konumunu de\u011fi\u015ftirir.<\/p>\n
        spreadMethod<\/code>: Gradyan D\u0131\u015f\u0131ndaki Alan\u0131 Doldurma<\/h3>\n
        Bazen gradyan, uyguland\u0131\u011f\u0131 nesnenin tamam\u0131n\u0131 doldurmayabilir (\u00f6rne\u011fin, gradyan\u0131n yar\u0131\u00e7ap\u0131 nesneden k\u00fc\u00e7\u00fckse). spreadMethod<\/code> \u00f6zelli\u011fi, gradyan\u0131n d\u0131\u015f\u0131ndaki alan\u0131n nas\u0131l doldurulaca\u011f\u0131n\u0131 belirler. \u00dc\u00e7 olas\u0131 de\u011feri vard\u0131r:<\/p>\n
          \n
        • pad<\/code> (varsay\u0131lan): Gradyan, son renk dura\u011f\u0131n\u0131n rengiyle doldurulur.<\/li>\n
        • reflect<\/code>: Gradyan, son duraktan ba\u015flayarak ters y\u00f6nde yans\u0131t\u0131l\u0131r ve bu i\u015flem nesnenin tamam\u0131 dolana kadar tekrarlan\u0131r.<\/li>\n
        • repeat<\/code>: Gradyan, ba\u015ftan sona tekrar edilir.<\/li>\n<\/ul>\n
          spreadMethod<\/code> \u00d6rne\u011fi<\/h4>\n
          \n  \n    \n      \n      \n    <\/radialGradient>\n\n    \n    \n  <\/defs>\n\n  Pad (Varsay\u0131lan)<\/text>\n  \n\n  Reflect<\/text>\n  \n\n  Repeat<\/text>\n  \n<\/svg><\/code><\/pre>\n
          Bu \u00f6rnekte, r=\"20%\"<\/code> oldu\u011fu i\u00e7in gradyan\u0131n kendisi k\u00fc\u00e7\u00fck bir alana yay\u0131l\u0131r. pad<\/code> durumunda d\u0131\u015f alan son renk (turuncu) ile doldurulurken, reflect<\/code> ve repeat<\/code> durumlar\u0131nda gradyan\u0131n deseni tekrarlan\u0131r.<\/p>\n
          Geli\u015fmi\u015f Radyal Gradyan Teknikleri<\/h2>\n
          Radyal gradyanlar\u0131n temel \u00f6zelliklerini anlad\u0131ktan sonra, daha karma\u015f\u0131k ve estetik olarak ho\u015f efektler olu\u015fturmak i\u00e7in bunlar\u0131 nas\u0131l birle\u015ftirebilece\u011fimize bakal\u0131m.<\/p>\n
          Odak Noktas\u0131 (fx<\/code>, fy<\/code>) ile Oynama<\/h3>\n
          fx<\/code> ve fy<\/code> \u00f6zellikleri, radyal gradyan\u0131n “\u0131\u015f\u0131k kayna\u011f\u0131n\u0131n” veya “ba\u015flang\u0131\u00e7 noktas\u0131n\u0131n” nerede oldu\u011funu belirler. Bu, gradyan\u0131n merkezden ba\u015flamak yerine, dairesel bir yay\u0131l\u0131m\u0131n belirli bir noktas\u0131ndan ba\u015flamas\u0131n\u0131 sa\u011flar. Bu, nesnelere daha ger\u00e7ek\u00e7i bir \u0131\u015f\u0131k ve g\u00f6lge efekti vermek i\u00e7in kullan\u0131labilir.<\/p>\n
          \u00d6rnek: \u00dc\u00e7 Boyutlu D\u00fc\u011fme Etkisi<\/h4>\n
          Bir d\u00fc\u011fmeye d\u0131\u015fb\u00fckey, 3D bir g\u00f6r\u00fcn\u00fcm vermek i\u00e7in odak noktas\u0131n\u0131 gradyan merkezinden biraz kayd\u0131rabiliriz:<\/p>\n
          \n  \n    \n      \n      \n      \n    <\/radialGradient>\n  <\/defs>\n\n  \n<\/svg><\/code><\/pre>\n
          Burada, fx=\"30%\"<\/code> ve fy=\"30%\"<\/code> olarak ayarlanm\u0131\u015ft\u0131r. Bu, gradyan\u0131n sol \u00fcst k\u00f6\u015feden ba\u015flayarak yay\u0131ld\u0131\u011f\u0131 hissini verir, b\u00f6ylece d\u00fc\u011fmeye bir \u0131\u015f\u0131k kayna\u011f\u0131 varm\u0131\u015f gibi bir parlakl\u0131k ve derinlik kat\u0131l\u0131r.<\/p>\n
          \u00c7oklu Renk Duraklar\u0131 ve \u015eeffafl\u0131k Kullan\u0131m\u0131<\/h3>\n
          Sadece iki renk dura\u011f\u0131 kullanmak yerine, gradyana birden fazla <\/code> elementi ekleyerek daha zengin ve karma\u015f\u0131k renk ge\u00e7i\u015fleri olu\u015fturabilirsiniz. Ayr\u0131ca, stop-opacity<\/code> \u00f6zelli\u011fini kullanarak renklerin \u015feffafl\u0131\u011f\u0131n\u0131 kontrol edebilir, b\u00f6ylece yar\u0131 saydam efektler veya bir rengin yava\u015f\u00e7a kayboldu\u011fu ge\u00e7i\u015fler yapabilirsiniz.<\/p>\n
          \u00d6rnek: Bulut veya Su Damlas\u0131 Etkisi<\/h4>\n
          \n  \n    \n      \n      \n      \n      \n    <\/radialGradient>\n  <\/defs>\n\n  \n<\/svg><\/code><\/pre>\n
          Bu \u00f6rnekte, d\u00f6rt renk dura\u011f\u0131 ve de\u011fi\u015fen \u015feffafl\u0131k de\u011ferleri kullan\u0131larak, beyazdan koyu maviye do\u011fru ge\u00e7i\u015f yapan ve d\u0131\u015fa do\u011fru giderek daha \u015feffaf hale gelen bir gradyan olu\u015fturulmu\u015ftur. Bu, bir su damlas\u0131 veya puslu bir bulut gibi bir etki yaratabilir.<\/p>\n
          Farkl\u0131 \u015eekillere Uygulama<\/h3>\n
          Radyal gradyanlar sadece dairelere de\u011fil, herhangi bir SVG \u015fekline (dikd\u00f6rtgen, poligon, yol vb.) uygulanabilir. Gradyan, uyguland\u0131\u011f\u0131 \u015feklin s\u0131n\u0131rlay\u0131c\u0131 kutusuna g\u00f6re hesaplan\u0131r (objectBoundingBox<\/code> kullan\u0131ld\u0131\u011f\u0131nda).<\/p>\n
          \u00d6rnek: Y\u0131ld\u0131z \u015eeklinde Radyal Gradyan<\/h4>\n
          \n  \n    \n      \n      \n    <\/radialGradient>\n  <\/defs>\n\n  \n<\/svg><\/code><\/pre>\n
          Bu \u00f6rnekte, bir y\u0131ld\u0131z \u015fekline radyal gradyan uygulanarak, y\u0131ld\u0131z\u0131n merkezinden d\u0131\u015fa do\u011fru alt\u0131n rengi bir parlama efekti verilmi\u015ftir.<\/p>\n
          Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
          SVG’deki radyal gradyanlar, web grafiklerine ve kullan\u0131c\u0131 aray\u00fczlerine derinlik, stil ve g\u00f6rsel \u00e7ekicilik katmak i\u00e7in son derece g\u00fc\u00e7l\u00fc ve esnek ara\u00e7lard\u0131r. <\/code> elementi ve onunla birlikte gelen cx<\/code>, cy<\/code>, r<\/code>, fx<\/code>, fy<\/code>, gradientUnits<\/code>, gradientTransform<\/code> ve spreadMethod<\/code> gibi \u00f6zellikler sayesinde, tasar\u0131mc\u0131lar ve geli\u015ftiriciler hayal g\u00fc\u00e7lerini s\u0131n\u0131rlamadan \u00e7e\u015fitli dairesel renk ge\u00e7i\u015fleri olu\u015fturabilirler. Odak noktas\u0131n\u0131 de\u011fi\u015ftirerek, birden fazla renk dura\u011f\u0131 ekleyerek ve \u015feffafl\u0131kla oynayarak basit bir gradyandan \u00e7ok daha fazlas\u0131n\u0131 elde etmek m\u00fcmk\u00fcnd\u00fcr.<\/p>\n
          S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
          Radyal gradyanlar sadece daireler i\u00e7in mi kullan\u0131l\u0131r?<\/strong>
          \nHay\u0131r, radyal gradyanlar herhangi bir SVG \u015fekline (dikd\u00f6rtgen, poligon, yol, metin vb.) uygulanabilir. Gradyan, varsay\u0131lan olarak uyguland\u0131\u011f\u0131 \u015feklin s\u0131n\u0131rlay\u0131c\u0131 kutusuna g\u00f6re \u00f6l\u00e7eklenir ve konumlan\u0131r (objectBoundingBox<\/code>). Bu, herhangi bir \u015fekle dairesel bir renk ge\u00e7i\u015fi efekti vermenizi sa\u011flar.<\/p>\n
          fx<\/code> ve fy<\/code> \u00f6zellikleri neden \u00f6nemlidir?<\/strong>
          \nfx<\/code> ve fy<\/code> (focal point – odak noktas\u0131) \u00f6zellikleri, gradyan\u0131n ba\u015flang\u0131\u00e7 noktas\u0131n\u0131 belirler. Varsay\u0131lan olarak gradyan\u0131n merkezi (cx<\/code>, cy<\/code>) ile ayn\u0131d\u0131r. Ancak bu noktalar\u0131 de\u011fi\u015ftirerek, gradyan\u0131n merkezden de\u011fil, belirli bir noktadan yay\u0131lmas\u0131n\u0131 sa\u011flayabilirsiniz. Bu, nesnelere bir \u0131\u015f\u0131k kayna\u011f\u0131 varm\u0131\u015f gibi daha ger\u00e7ek\u00e7i veya dramatik g\u00f6lgelendirme ve vurgu efektleri eklemek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n
          gradientUnits<\/code> ne zaman userSpaceOnUse<\/code> olmal\u0131?<\/strong>
          \ngradientUnits=\"userSpaceOnUse\"<\/code> de\u011ferini, gradyan\u0131n boyutunun ve konumunun uyguland\u0131\u011f\u0131 nesnenin boyutundan ba\u011f\u0131ms\u0131z, mutlak piksel de\u011ferleri ile kontrol edilmesini istedi\u011finizde kullanmal\u0131s\u0131n\u0131z. Bu, \u00f6zellikle birden fazla nesneye ayn\u0131 gradyan\u0131 uygularken ve gradyan\u0131n her zaman ayn\u0131 boyutta ve konumda kalmas\u0131n\u0131 istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r. \u00c7o\u011fu durumda, gradyan\u0131n nesneye g\u00f6re \u00f6l\u00e7eklenmesini sa\u011flayan varsay\u0131lan objectBoundingBox<\/code> yeterlidir.<\/p>\n
          SVG radyal gradyanlar\u0131 ile CSS radyal gradyanlar\u0131 aras\u0131ndaki fark nedir?<\/strong>
          \nHem SVG hem de CSS, radyal gradyanlar olu\u015fturma yetene\u011fine sahiptir. Temel prensipleri benzer olsa da, SVG gradyanlar\u0131 genellikle daha fazla kontrol ve esneklik sunar. \u00d6zellikle, SVG’nin fx<\/code> ve fy<\/code> (odak noktas\u0131) \u00f6zellikleri, CSS’in radial-gradient()<\/code> fonksiyonunda do\u011frudan bu kadar ince ayar yapma imkan\u0131 sunmaz. SVG gradyanlar\u0131, karma\u015f\u0131k vekt\u00f6r grafiklerinde daha entegre ve g\u00fc\u00e7l\u00fc bir \u015fekilde kullan\u0131labilirken, CSS gradyanlar\u0131 genellikle web aray\u00fczlerinde daha h\u0131zl\u0131 ve kolay bir \u015fekilde arka plan efektleri olu\u015fturmak i\u00e7in tercih edilir.<\/p>\n
          Radyal gradyanlar\u0131n performansa etkisi var m\u0131?<\/strong>
          \nGenel olarak, modern taray\u0131c\u0131larda radyal gradyanlar\u0131n performansa etkisi minimaldir. Ancak, \u00e7ok say\u0131da karma\u015f\u0131k gradyan\u0131n ayn\u0131 anda kullan\u0131lmas\u0131 veya a\u015f\u0131r\u0131 b\u00fcy\u00fck SVG dosyalar\u0131nda kullan\u0131lmas\u0131 durumunda, taray\u0131c\u0131 render s\u00fcresi \u00fczerinde k\u00fc\u00e7\u00fck bir etki olabilir. \u00c7o\u011fu standart kullan\u0131m senaryosunda, performans endi\u015fesi duyulmas\u0131na gerek yoktur.<\/p>\n
          <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web tasar\u0131m\u0131nda ve grafiklerde estetik ve derinlik katman\u0131n en etkili yollar\u0131ndan biri gradyanlard\u0131r. Gradyanlar, bir renkten di\u011ferine veya bi","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37762","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nSVG'de Radyal Gradyanlara Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG'de Radyal Gradyanlara Giri\u015f\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m\u0131nda ve grafiklerde estetik ve derinlik katman\u0131n en etkili yollar\u0131ndan biri gradyanlard\u0131r. Gradyanlar, bir renkten di\u011ferine veya bi\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-14T15:41:38+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG’de Radyal Gradyanlara Giri\u015f\",\"datePublished\":\"2026-01-14T15:41:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\"},\"wordCount\":1821,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\",\"name\":\"SVG'de Radyal Gradyanlara Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-14T15:41:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG’de Radyal Gradyanlara Giri\u015f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG'de Radyal Gradyanlara Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG'de Radyal Gradyanlara Giri\u015f","og_description":"Web tasar\u0131m\u0131nda ve grafiklerde estetik ve derinlik katman\u0131n en etkili yollar\u0131ndan biri gradyanlard\u0131r. Gradyanlar, bir renkten di\u011ferine veya bi","og_url":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-14T15:41:38+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG’de Radyal Gradyanlara Giri\u015f","datePublished":"2026-01-14T15:41:38+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/"},"wordCount":1821,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/","url":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/","name":"SVG'de Radyal Gradyanlara Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-14T15:41:38+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svgde-radyal-gradyanlara-giris\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG’de Radyal Gradyanlara Giri\u015f"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37762"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37762\/revisions"}],"predecessor-version":[{"id":37763,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37762\/revisions\/37763"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}