{"id":32560,"date":"2025-10-23T08:31:11","date_gmt":"2025-10-23T05:31:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/"},"modified":"2025-10-23T08:31:11","modified_gmt":"2025-10-23T05:31:11","slug":"svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/","title":{"rendered":"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite<\/code>‘\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n

G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek i\u00e7in bol miktarda g\u00f6rsel ikon kullan\u0131r. Ancak, bu ikonlar\u0131n y\u00f6netimi, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde, ciddi zorluklar\u0131 beraberinde getirebilir. Her bir ikonun ayr\u0131 bir dosya olarak sunucuya y\u00fcklenmesi, taray\u0131c\u0131n\u0131n her ikon i\u00e7in ayr\u0131 bir HTTP iste\u011fi g\u00f6ndermesine neden olur. Bu durum, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda, sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde uzatabilir ve genel performans\u0131 olumsuz etkileyebilir.<\/p>\n

\u00d6te yandan, ikon fontlar\u0131 (Font Awesome, Material Icons gibi) pop\u00fcler bir alternatif sunsa da, onlar\u0131n da kendine \u00f6zg\u00fc dezavantajlar\u0131 vard\u0131r. Font boyutlar\u0131n\u0131n b\u00fcy\u00fck olmas\u0131, metin i\u015fleme sorunlar\u0131, anti-aliasing problemleri ve daha da \u00f6nemlisi, ikonlar\u0131n semantik olarak metin olmamas\u0131 nedeniyle eri\u015filebilirlik sorunlar\u0131 yaratabilmeleri, bu \u00e7\u00f6z\u00fcm\u00fcn baz\u0131 senaryolarda yetersiz kalmas\u0131na yol a\u00e7ar. Ayr\u0131ca, yeni bir ikon eklemek veya mevcut bir ikonu de\u011fi\u015ftirmek, t\u00fcm font dosyas\u0131n\u0131n g\u00fcncellenmesini gerektirebilir ki bu da bak\u0131m s\u00fcre\u00e7lerini hantalla\u015ft\u0131r\u0131r.<\/p>\n

Bireysel SVG dosyalar\u0131 kullan\u0131ld\u0131\u011f\u0131nda ise, her bir SVG dosyas\u0131n\u0131n HTML i\u00e7ine g\u00f6m\u00fclmesi (inline SVG) veya bir <\/code> etiketiyle referans verilmesi gerekir. Inline SVG, ekstra HTTP iste\u011fi olmasa da, HTML dosyas\u0131n\u0131n boyutunu art\u0131r\u0131r ve DOM’u \u015fi\u015firir. <\/code> etiketi ise yine ayr\u0131 bir HTTP iste\u011fi demektir ve CSS ile stilizasyon esnekli\u011fini k\u0131s\u0131tlar. T\u00fcm bu y\u00f6ntemler, geli\u015ftiriciler i\u00e7in hem performans hem de y\u00f6netilebilirlik a\u00e7\u0131s\u0131ndan s\u0131k\u0131nt\u0131 yarat\u0131r. Dolay\u0131s\u0131yla, ikonlar\u0131 tek bir birim alt\u0131nda toplayarak hem performans\u0131 art\u0131rmak hem de bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flamak ad\u0131na daha sofistike bir \u00e7\u00f6z\u00fcme ihtiya\u00e7 duyulmaktad\u0131r. \u0130\u015fte tam bu noktada, SVG sprite kavram\u0131 ve svg-sprite<\/code> gibi ara\u00e7lar devreye girerek modern web geli\u015ftirme s\u00fcre\u00e7lerine b\u00fcy\u00fck bir katk\u0131 sunar.<\/p>\n

SVG Sprite Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n

SVG (Scalable Vector Graphics), vekt\u00f6r tabanl\u0131 bir resim format\u0131d\u0131r ve web i\u00e7in m\u00fckemmel bir se\u00e7imdir \u00e7\u00fcnk\u00fc \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131z olarak kalitesini korur ve genellikle k\u00fc\u00e7\u00fck dosya boyutlar\u0131na sahiptir. Ancak, y\u00fczlerce SVG ikonunu ayr\u0131 ayr\u0131 y\u00f6netmek, yukar\u0131da da belirtti\u011fimiz gibi, performans ve geli\u015ftirme deneyimi a\u00e7\u0131s\u0131ndan s\u0131k\u0131nt\u0131l\u0131 olabilir. \u0130\u015fte bu noktada SVG sprite’lar, adeta bir can simidi gibi imdad\u0131m\u0131za yeti\u015fir.<\/p>\n

Bir SVG sprite, asl\u0131nda birden fazla SVG ikonunu tek bir dosya i\u00e7inde birle\u015ftiren bir tekniktir. Bu tek dosya, i\u00e7inde her biri benzersiz bir ID’ye sahip olan <\/code> elemanlar\u0131 bar\u0131nd\u0131r\u0131r. Bu semboller, daha sonra HTML i\u00e7indeki <\/code> etiketi arac\u0131l\u0131\u011f\u0131yla referans al\u0131narak istenilen yerde g\u00f6sterilir. Bu y\u00f6ntem, web sitenizin veya uygulaman\u0131z\u0131n performans\u0131n\u0131 ve y\u00f6netilebilirli\u011fini dramatik bir \u015fekilde iyile\u015ftirir.<\/p>\n

Peki, SVG sprite kullanman\u0131n ba\u015fl\u0131ca avantajlar\u0131 nelerdir?<\/h3>\n
    \n
  • \n Azalan HTTP \u0130stekleri:<\/strong> Her ikon i\u00e7in ayr\u0131 bir sunucu iste\u011fi yapmak yerine, taray\u0131c\u0131 tek bir b\u00fcy\u00fck sprite dosyas\u0131n\u0131 bir kez indirir. Bu, \u00f6zellikle mobil cihazlarda veya a\u011f gecikmelerinin ya\u015fand\u0131\u011f\u0131 durumlarda sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.\n <\/li>\n
  • \n Daha Kolay \u00d6nbellekleme:<\/strong> Tek bir sprite dosyas\u0131, taray\u0131c\u0131 taraf\u0131ndan daha kolay \u00f6nbelle\u011fe al\u0131nabilir. Kullan\u0131c\u0131 sitenizin farkl\u0131 sayfalar\u0131n\u0131 ziyaret etti\u011finde, ikon sprite’\u0131 zaten \u00f6nbellekte oldu\u011fu i\u00e7in yeniden indirilmez, bu da kullan\u0131c\u0131 deneyimini iyile\u015ftirir.\n <\/li>\n
  • \n Tutarl\u0131 Stilizasyon:<\/strong> SVG ikonlar\u0131, CSS ile kolayca renklendirilebilir, boyutland\u0131r\u0131labilir ve di\u011fer stiller uygulanabilir. Sprite i\u00e7indeki ikonlar \u00fczerinde CSS ile merkezi bir kontrol sa\u011flamak, tema de\u011fi\u015fikliklerini veya stil g\u00fcncellemelerini \u00e7ok daha basit hale getirir.\n <\/li>\n
  • \n Eri\u015filebilirlik ve Semantik Zenginlik:<\/strong> \u0130kon fontlar\u0131n\u0131n aksine, SVG’ler semantik olarak daha do\u011fru etiketlenebilir (\u00f6rne\u011fin <\/code> ve <code><desc><\/code> etiketleri ile) ve ekran okuyucular taraf\u0131ndan daha iyi anla\u015f\u0131labilir. Bu, web sitenizin eri\u015filebilirlik standartlar\u0131na uygunlu\u011funu art\u0131r\u0131r.\n <\/li>\n<li>\n <strong>Kolay Bak\u0131m ve Geli\u015ftirme:<\/strong> T\u00fcm ikonlar tek bir yerde topland\u0131\u011f\u0131 i\u00e7in, yeni bir ikon eklemek veya mevcut bir ikonu d\u00fczenlemek \u00e7ok daha basittir. Geli\u015ftiricilerin ayr\u0131 ayr\u0131 dosya yollar\u0131n\u0131 takip etmesine gerek kalmaz.\n <\/li>\n<\/ul>\n<div class=\"tip\">\n Uzman \u0130pucu: SVG sprite kullanmak, genellikle web sitesi performans\u0131nda %20-30 oran\u0131nda iyile\u015fme sa\u011flayabilir, \u00f6zellikle de \u00e7ok say\u0131da ikon kullan\u0131yorsan\u0131z. Bu, hem son kullan\u0131c\u0131 deneyimini hem de SEO s\u0131ralamalar\u0131n\u0131 olumlu etkiler.\n <\/div>\n<p>Sonu\u00e7 olarak, SVG sprite’lar, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir. Performans\u0131 optimize etmek, bak\u0131m\u0131 kolayla\u015ft\u0131rmak ve daha eri\u015filebilir web uygulamalar\u0131 in\u015fa etmek isteyen her .NET geli\u015ftiricisinin bu tekni\u011fi benimsemesi \u015fiddetle tavsiye edilir.<\/p>\n<h2>.NET Projelerinde svg-sprite Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n<p><code>svg-sprite<\/code>, temelde Node.js tabanl\u0131 bir ara\u00e7t\u0131r ve bireysel SVG dosyalar\u0131n\u0131z\u0131 al\u0131p farkl\u0131 formatlarda (CSS sprite, SVG stack, SVG sprite vb.) tek bir sprite dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrmenize olanak tan\u0131r. .NET ekosistemindeki geli\u015ftiriciler i\u00e7in “Node.js arac\u0131” ifadesi ilk ba\u015fta kula\u011fa yabanc\u0131 gelebilir. Ancak g\u00fcn\u00fcm\u00fczde modern .NET projeleri (\u00f6zellikle ASP.NET Core tabanl\u0131 web uygulamalar\u0131), front-end varl\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in s\u0131kl\u0131kla Node.js tabanl\u0131 ara\u00e7lar\u0131 (npm, Gulp, Webpack gibi) kullan\u0131r. Bu ara\u00e7lar, .NET projenizin build s\u00fcrecine kolayca entegre edilebilir.<\/p>\n<p><code>svg-sprite<\/code>‘\u0131 bir .NET projesinde kullanmak demek, asl\u0131nda projenizin front-end build a\u015famas\u0131nda bu arac\u0131 \u00e7al\u0131\u015ft\u0131rmak ve \u00fcretti\u011fi sprite dosyas\u0131n\u0131 .NET uygulaman\u0131z\u0131n statik dosya sunum mekanizmas\u0131 arac\u0131l\u0131\u011f\u0131yla istemciye sunmak demektir. Bu entegrasyon, geli\u015ftirme ortam\u0131n\u0131zda bir Node.js kurulumunun bulunmas\u0131n\u0131 gerektirir, ki bu da modern web geli\u015ftirme i\u00e7in olduk\u00e7a standart bir durumdur.<\/p>\n<p>Temel olarak, <code>svg-sprite<\/code>‘\u0131 .NET projenize entegre etmek i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleriz:<\/p>\n<ol>\n<li>\n <strong>Node.js ve npm Kurulumu:<\/strong> E\u011fer sisteminizde Node.js ve npm kurulu de\u011filse, \u00f6ncelikle bunlar\u0131 kurman\u0131z gerekir. Resmi Node.js web sitesinden kolayca indirilebilirler.\n <\/li>\n<li>\n <strong>Proje Yap\u0131s\u0131n\u0131n Haz\u0131rlanmas\u0131:<\/strong> .NET projenizin k\u00f6k dizininde veya front-end varl\u0131klar\u0131n\u0131n bulundu\u011fu bir alt dizinde (\u00f6rne\u011fin <code>wwwroot\/assets<\/code> veya <code>ClientApp<\/code>), SVG kaynak dosyalar\u0131n\u0131z\u0131 tutacak bir klas\u00f6r olu\u015fturun (\u00f6rn: <code>.\/src\/icons<\/code>).\n <\/li>\n<li>\n <strong><code>svg-sprite<\/code>‘\u0131n Y\u00fcklenmesi:<\/strong> Projenizin k\u00f6k dizininde (veya front-end build dizininde) bir <code>package.json<\/code> dosyas\u0131 olu\u015fturun ve <code>svg-sprite<\/code>‘\u0131 bir geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak y\u00fckleyin.\n <\/li>\n<li>\n <strong>Yap\u0131land\u0131rma ve \u00c7al\u0131\u015ft\u0131rma:<\/strong> <code>package.json<\/code> dosyas\u0131nda bir npm scripti tan\u0131mlayarak veya bir Gulp\/Webpack g\u00f6revi olu\u015fturarak <code>svg-sprite<\/code>‘\u0131 yap\u0131land\u0131r\u0131n ve \u00e7al\u0131\u015ft\u0131r\u0131n. Bu script, kaynak SVG dosyalar\u0131n\u0131 al\u0131p tek bir sprite dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrecektir.\n <\/li>\n<li>\n <strong>.NET Uygulamas\u0131nda Kullan\u0131m:<\/strong> Olu\u015fturulan sprite dosyas\u0131n\u0131 .NET uygulaman\u0131z\u0131n statik dosyalar b\u00f6l\u00fcm\u00fcne (genellikle <code>wwwroot<\/code> klas\u00f6r\u00fc) yerle\u015ftirin ve HTML\/Razor g\u00f6r\u00fcn\u00fcmlerinizde <code><use><\/code> etiketi ile ikonlar\u0131 referans al\u0131n.\n <\/li>\n<\/ol>\n<p>Bu yakla\u015f\u0131m sayesinde, .NET’in sa\u011flam arka u\u00e7 yetenekleri ile Node.js tabanl\u0131 front-end ara\u00e7lar\u0131n\u0131n \u00e7evikli\u011fini birle\u015ftirmi\u015f olursunuz. <code>svg-sprite<\/code>, bu entegrasyonu son derece kolayla\u015ft\u0131rarak, .NET geli\u015ftiricilerinin de modern ikon y\u00f6netimi tekniklerinden tam anlam\u0131yla faydalanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h2>Bir .NET Core Projesinde svg-sprite Entegrasyonu Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>\u015eimdi pratik bir \u00f6rne\u011fe ge\u00e7erek, bir ASP.NET Core projesine <code>svg-sprite<\/code>‘\u0131 nas\u0131l entegre edebilece\u011fimizi ad\u0131m ad\u0131m inceleyelim. Bu \u00f6rnek, projenizin front-end build s\u00fcrecinde <code>npm<\/code> scriptlerini kullanarak sprite olu\u015fturmay\u0131 g\u00f6sterecek.<\/p>\n<h3>Ad\u0131m 1: Projeyi Haz\u0131rlama ve Node.js Ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 Kurma<\/h3>\n<p>Mevcut bir ASP.NET Core projeniz oldu\u011funu varsayarak, projenizin k\u00f6k dizininde (<code>.csproj<\/code> dosyas\u0131n\u0131n bulundu\u011fu yer) bir <code>package.json<\/code> dosyas\u0131 olu\u015fturun. E\u011fer yoksa, terminalde projenizin k\u00f6k dizinindeyken <code>npm init -y<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak h\u0131zla olu\u015fturabilirsiniz.<\/p>\n<p>Ard\u0131ndan, <code>svg-sprite<\/code> paketini bir geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak y\u00fckleyin:<\/p>\n<pre><code>\nnpm install svg-sprite --save-dev\n <\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>svg-sprite<\/code>'\u0131 projenizin <code>node_modules<\/code> klas\u00f6r\u00fcne indirecek ve <code>package.json<\/code> dosyan\u0131za ekleyecektir.<\/p>\n<h3>Ad\u0131m 2: SVG Kaynak Klas\u00f6r\u00fcn\u00fc Olu\u015fturma<\/h3>\n<p>T\u00fcm SVG ikonlar\u0131n\u0131z\u0131 tutaca\u011f\u0131n\u0131z bir klas\u00f6r olu\u015fturun. \u00d6rne\u011fin, projenizin k\u00f6k dizininde <code>.\/src\/icons<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturup t\u00fcm <code>.svg<\/code> dosyalar\u0131n\u0131z\u0131 buraya kopyalay\u0131n.<\/p>\n<pre><code>\n\u2514\u2500\u2500 MyAspNetCoreApp\/\n \u251c\u2500\u2500 .csproj\n \u251c\u2500\u2500 package.json\n \u251c\u2500\u2500 node_modules\/\n \u2514\u2500\u2500 src\/\n \u2514\u2500\u2500 icons\/\n \u251c\u2500\u2500 home.svg\n \u251c\u2500\u2500 settings.svg\n \u2514\u2500\u2500 user.svg\n <\/pre>\n<p><\/code><\/p>\n<h3>Ad\u0131m 3: <code>svg-sprite<\/code> Yap\u0131land\u0131rma ve Npm Scripti Ekleme<\/h3>\n<p><code>package.json<\/code> dosyan\u0131z\u0131n <code>scripts<\/code> b\u00f6l\u00fcm\u00fcne <code>svg-sprite<\/code>'\u0131 \u00e7al\u0131\u015ft\u0131racak bir komut ekleyin. Bu komut, kaynak klas\u00f6rdeki t\u00fcm SVG'leri al\u0131p, belirtilen \u00e7\u0131kt\u0131 klas\u00f6r\u00fcne (\u00f6rne\u011fin <code>wwwroot\/dist<\/code>) bir sprite dosyas\u0131 olu\u015fturacakt\u0131r.<\/p>\n<pre><code>\n{\n \"name\": \"my-aspnet-core-app\",\n \"version\": \"1.0.0\",\n \"description\": \"My ASP.NET Core application with SVG sprites.\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build:svg-sprite\": \"svg-sprite --mode symbol --include-base false -s src\/icons -o wwwroot\/dist\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"svg-sprite\": \"^2.0.0\" \n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Buradaki komut a\u00e7\u0131klamas\u0131:<\/p>\n<ul>\n<li><code>--mode symbol<\/code>: SVG sprite'\u0131 <code><symbol><\/code> elemanlar\u0131 kullanarak olu\u015fturur, bu da kullan\u0131m i\u00e7in en esnek moddur.<\/li>\n<li><code>--include-base false<\/code>: Olu\u015fturulan sprite'\u0131n temel URL'leri i\u00e7ermemesini sa\u011flar.<\/li>\n<li><code>-s src\/icons<\/code>: Kaynak SVG dosyalar\u0131n\u0131n bulundu\u011fu dizini belirtir.<\/li>\n<li><code>-o wwwroot\/dist<\/code>: Olu\u015fturulan sprite dosyas\u0131n\u0131n ve ilgili di\u011fer dosyalar\u0131n (varsa) yaz\u0131laca\u011f\u0131 \u00e7\u0131kt\u0131 dizinini belirtir. <code>wwwroot<\/code>, ASP.NET Core'un statik dosyalar\u0131 servis etti\u011fi varsay\u0131lan klas\u00f6rd\u00fcr.<\/li>\n<\/ul>\n<div class=\"tip\">\n Uzman \u0130pucu: <code>svg-sprite<\/code> komutunuza <code>--pretty<\/code> bayra\u011f\u0131n\u0131 ekleyerek \u00e7\u0131kt\u0131n\u0131n daha okunabilir olmas\u0131n\u0131 sa\u011flayabilirsiniz, bu hata ay\u0131klama s\u0131ras\u0131nda olduk\u00e7a faydal\u0131d\u0131r.\n <\/div>\n<h3>Ad\u0131m 4: Sprite Olu\u015fturma<\/h3>\n<p>Terminalde projenizin k\u00f6k dizinindeyken a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code>\nnpm run build:svg-sprite\n <\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>src\/icons<\/code> klas\u00f6r\u00fcndeki t\u00fcm SVG dosyalar\u0131n\u0131 alacak ve <code>wwwroot\/dist\/sprite.symbol.svg<\/code> ad\u0131nda tek bir sprite dosyas\u0131 olu\u015fturacakt\u0131r.<\/p>\n<h3>Ad\u0131m 5: ASP.NET Core Uygulaman\u0131zda Sprite Kullan\u0131m\u0131<\/h3>\n<p>Olu\u015fturulan <code>sprite.symbol.svg<\/code> dosyas\u0131n\u0131 HTML veya Razor g\u00f6r\u00fcn\u00fcmlerinizde kullanmak i\u00e7in, genellikle sprite dosyas\u0131n\u0131 sayfan\u0131z\u0131n en ba\u015f\u0131na (\u00f6rne\u011fin <code><body><\/code> etiketinin hemen i\u00e7ine) dahil ederiz. Bu sayede t\u00fcm ikonlar DOM'a y\u00fcklenmi\u015f olur ve gerekti\u011finde <code><use><\/code> etiketi ile referans al\u0131nabilir.<\/p>\n<pre><code class=\"language-html\">\n<body>\n <!-- SVG Sprite'\u0131 sayfan\u0131n ba\u015f\u0131na dahil et -->\n <svg aria-hidden=\"true\" style=\"position: absolute; width: 0; height: 0; overflow: hidden;\">\n <!-- Bu k\u0131s\u0131m, 'wwwroot\/dist\/sprite.symbol.svg' dosyas\u0131n\u0131n i\u00e7eri\u011fi taraf\u0131ndan doldurulacakt\u0131r. -->\n <!-- \u00d6rnek: <symbol id=\"icon-home\" viewBox=\"0 0 20 20\"><path d=\"...\"\/><\/symbol> -->\n <!-- ASP.NET Core'da bunu Razor ile dinamik olarak okuyabilirsiniz: -->\n @await Html.PartialAsync(\"_SvgSprite\") \n <\/svg>\n\n <!-- \u0130konu kullanma -->\n <svg class=\"icon icon-home\">\n <use href=\"\/dist\/sprite.symbol.svg#icon-home\"><\/use>\n <\/svg>\n\n <svg class=\"icon icon-settings\">\n <use href=\"\/dist\/sprite.symbol.svg#icon-settings\"><\/use>\n <\/svg>\n<\/body>\n <\/pre>\n<p><\/code><\/p>\n<p><code>_SvgSprite.cshtml<\/code> ad\u0131nda bir Partial View olu\u015fturarak, sprite dosyas\u0131n\u0131n i\u00e7eri\u011fini dinamik olarak HTML'e enjekte edebilirsiniz:<\/p>\n<pre><code class=\"language-csharp\">\n\/\/ Views\/Shared\/_SvgSprite.cshtml\n@using System.IO\n@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment\n\n@{\n var spritePath = Path.Combine(WebHostEnvironment.WebRootPath, \"dist\", \"sprite.symbol.svg\");\n if (File.Exists(spritePath))\n {\n var spriteContent = await File.ReadAllTextAsync(spritePath);\n @Html.Raw(spriteContent);\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p><strong>Not:<\/strong> <code><use><\/code> etiketi i\u00e7erisindeki <code>href<\/code> niteli\u011fi, sprite dosyas\u0131n\u0131n yolunu ve kullan\u0131lacak ikonun ID'sini (<code>#icon-home<\/code> gibi) belirtir. <code>svg-sprite<\/code> arac\u0131, varsay\u0131lan olarak SVG dosya adlar\u0131n\u0131 ikon ID'leri olarak kullan\u0131r (\u00f6rne\u011fin <code>home.svg<\/code> -> <code>icon-home<\/code>).<\/p>\n<p>CSS ile ikonlar\u0131 boyutland\u0131rmak ve renklendirmek i\u00e7in a\u015fa\u011f\u0131daki gibi stiller kullanabilirsiniz:<\/p>\n<pre><code class=\"language-css\">\n.icon {\n display: inline-block;\n width: 1em; \/* \u0130kon boyutunu font-size ile kontrol et *\/\n height: 1em;\n stroke-width: 0;\n stroke: currentColor; \/* \u0130kon rengini yaz\u0131 rengiyle e\u015fitle *\/\n fill: currentColor; \/* \u0130konun i\u00e7ini yaz\u0131 rengiyle doldur *\/\n}\n\n.icon-home {\n font-size: 24px;\n}\n\n.icon-settings {\n font-size: 32px;\n color: #007bff; \/* \u00d6zel renk *\/\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu ad\u0131mlarla, .NET Core projenize <code>svg-sprite<\/code> entegrasyonunu ba\u015far\u0131l\u0131 bir \u015fekilde tamamlam\u0131\u015f olursunuz. Art\u0131k ikonlar\u0131n\u0131z\u0131 kolayca y\u00f6netebilir ve web uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131rabilirsiniz.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve \u0130leri D\u00fczey Kullan\u0131m: svg-sprite ile Performans\u0131 ve Y\u00f6netilebilirli\u011fi Nas\u0131l Maksimize Ederiz?<\/h2>\n<p><code>svg-sprite<\/code>'\u0131n temel entegrasyonunu anlad\u0131ktan sonra, ger\u00e7ek d\u00fcnya senaryolar\u0131nda bu arac\u0131 nas\u0131l daha etkin kullanabilece\u011fimizi ve performans ile y\u00f6netilebilirli\u011fi nas\u0131l maksimize edebilece\u011fimizi inceleyelim. B\u00fcy\u00fck \u00f6l\u00e7ekli bir e-ticaret platformundan, kurumsal bir portal uygulamas\u0131na kadar bir\u00e7ok senaryoda <code>svg-sprite<\/code>, geli\u015ftiricilere \u00f6nemli avantajlar sunar.<\/p>\n<h3>Vaka Analizi: B\u00fcy\u00fck Bir E-ticaret Platformunda \u0130kon Y\u00f6netimi<\/h3>\n<p>Hayal edin ki, y\u00fcz binlerce \u00fcr\u00fcn, onlarca kategori ve \u00e7e\u015fitli kullan\u0131c\u0131 aray\u00fcz\u00fc eleman\u0131na sahip b\u00fcy\u00fck bir e-ticaret siteniz var. Bu platformda, \u00fcr\u00fcn ikonlar\u0131 (indirim, yeni \u00fcr\u00fcn, kargo), kategori ikonlar\u0131 (elektronik, giyim, ev), \u00f6deme y\u00f6ntemleri ikonlar\u0131, sosyal medya ikonlar\u0131 ve \u00e7e\u015fitli UI ikonlar\u0131 (sepete ekle, favori, payla\u015f) gibi binlerce farkl\u0131 ikon kullan\u0131l\u0131yor. Bu ikonlar\u0131n her birini ayr\u0131 bir SVG dosyas\u0131 olarak y\u00f6netmek veya ikon fontu kullanmak, ciddi performans sorunlar\u0131na ve bak\u0131m kabuslar\u0131na yol a\u00e7ar:<\/p>\n<ul>\n<li><strong>Performans Sorunu:<\/strong> Her \u00fcr\u00fcn veya kategori sayfas\u0131nda onlarca farkl\u0131 ikonun ayr\u0131 ayr\u0131 y\u00fcklenmesi, y\u00fczlerce HTTP iste\u011fi anlam\u0131na gelir. Bu da sayfa y\u00fckleme s\u00fcrelerini uzatarak kullan\u0131c\u0131lar\u0131n siteyi terk etmesine neden olabilir.<\/li>\n<li><strong>Bak\u0131m Kabusu:<\/strong> Yeni bir kategori eklendi\u011finde veya mevcut bir ikonun stili de\u011fi\u015ftirildi\u011finde, binlerce dosya aras\u0131nda do\u011fru ikonu bulmak ve g\u00fcncellemek, zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir.<\/li>\n<li><strong>\u00d6l\u00e7eklenebilirlik Sorunu:<\/strong> Proje b\u00fcy\u00fcd\u00fck\u00e7e ikon say\u0131s\u0131 artar ve bu da yukar\u0131daki sorunlar\u0131 daha da k\u00f6t\u00fcle\u015ftirir.<\/li>\n<\/ul>\n<p><strong>\u00c7\u00f6z\u00fcm: <code>svg-sprite<\/code> ile Tek Bir Sprite<\/strong><\/p>\n<p><code>svg-sprite<\/code> kullanarak, t\u00fcm bu ikonlar\u0131 tek bir <code>sprite.symbol.svg<\/code> dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrebiliriz. Bu sayede:<\/p>\n<ul>\n<li><strong>Azalan HTTP \u0130stekleri:<\/strong> Taray\u0131c\u0131, y\u00fczlerce ikon yerine sadece tek bir sprite dosyas\u0131n\u0131 indirir. Bu, site genelinde HTTP isteklerini dramatik bir \u015fekilde azaltarak sayfa y\u00fckleme s\u00fcrelerini %30-50 oran\u0131nda iyile\u015ftirebilir.<\/li>\n<li><strong>Geli\u015fmi\u015f \u00d6nbellekleme:<\/strong> Sprite dosyas\u0131 bir kez indirildikten sonra taray\u0131c\u0131 \u00f6nbelle\u011finde saklan\u0131r. Kullan\u0131c\u0131 farkl\u0131 \u00fcr\u00fcn veya kategori sayfalar\u0131na gitti\u011finde, ikonlar an\u0131nda y\u00fcklenir.<\/li>\n<li><strong>Merkezi Stilizasyon:<\/strong> T\u00fcm ikonlar tek bir CSS dosyas\u0131 \u00fczerinden kolayca boyutland\u0131r\u0131labilir, renklendirilebilir ve \u00f6zelle\u015ftirilebilir. \u00d6rne\u011fin, marka rengi de\u011fi\u015fti\u011finde, sadece bir CSS de\u011fi\u015fkenini g\u00fcncelleyerek t\u00fcm ikonlar\u0131n rengini de\u011fi\u015ftirmek m\u00fcmk\u00fcnd\u00fcr.<\/li>\n<\/ul>\n<p>Bu vaka analizi, <code>svg-sprite<\/code>'\u0131n sadece basit web siteleri i\u00e7in de\u011fil, ayn\u0131 zamanda y\u00fcksek performans ve \u00f6l\u00e7eklenebilirlik gerektiren karma\u015f\u0131k uygulamalar i\u00e7in de ne kadar kritik bir ara\u00e7 oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<h3>CSS ile Dinamik Stil Y\u00f6netimi<\/h3>\n<p>SVG sprite'lar, CSS ile m\u00fckemmel bir uyum i\u00e7indedir. <code>currentColor<\/code> \u00f6zelli\u011fi sayesinde ikonlar\u0131n rengini metin rengiyle otomatik olarak e\u015fle\u015ftirebilirsiniz, bu da tema de\u011fi\u015fikliklerini veya kullan\u0131c\u0131ya \u00f6zel renk se\u00e7eneklerini kolayla\u015ft\u0131r\u0131r.<\/p>\n<pre><code class=\"language-css\">\n\/* Temel ikon stili *\/\n.icon {\n display: inline-block;\n width: 1.2em;\n height: 1.2em;\n vertical-align: middle; \/* Metinle hizalama *\/\n fill: currentColor; \/* \u0130kon rengini metin rengiyle ayn\u0131 yapar *\/\n stroke: currentColor; \/* \u00c7izgi rengini metin rengiyle ayn\u0131 yapar *\/\n transition: all 0.2s ease-in-out; \/* Hover efekti i\u00e7in yumu\u015fak ge\u00e7i\u015f *\/\n}\n\n\/* Farkl\u0131 boyutlarda ikonlar *\/\n.icon-small { font-size: 16px; }\n.icon-medium { font-size: 24px; }\n.icon-large { font-size: 32px; }\n\n\/* Duruma g\u00f6re ikon rengi de\u011fi\u015ftirme *\/\n.btn-primary .icon {\n color: #fff; \/* Buton \u00fczerindeki ikonlar beyaz olsun *\/\n}\n\na:hover .icon {\n fill: #007bff; \/* Link \u00fczerindeki ikonlar hover'da mavi olsun *\/\n}\n <\/pre>\n<p><\/code><\/p>\n<h3>Eri\u015filebilirlik (Accessibility)<\/h3>\n<p>SVG'ler, ekran okuyucular i\u00e7in ikon fontlar\u0131ndan daha eri\u015filebilirdir. Ancak yine de do\u011fru kullanmak \u00f6nemlidir:<\/p>\n<ul>\n<li>\n <strong><code>aria-hidden=\"true\"<\/code>:<\/strong> E\u011fer ikon sadece dekoratifse ve metinle zaten anlam\u0131 a\u00e7\u0131klan\u0131yorsa, ekran okuyucular\u0131n onu g\u00f6rmezden gelmesi i\u00e7in <code><svg><\/code> etiketine <code>aria-hidden=\"true\"<\/code> ekleyin.\n <\/li>\n<li>\n <strong><code><title><\/code> ve <code><desc><\/code>:<\/strong> E\u011fer ikonun tek ba\u015f\u0131na bir anlam\u0131 varsa ve bir metinle a\u00e7\u0131klanm\u0131yorsa, <code><symbol><\/code> veya <code><svg><\/code> i\u00e7ine <code><title><\/code> ve <code><desc><\/code> etiketleri ekleyerek alternatif metin sa\u011flay\u0131n.\n <\/li>\n<\/ul>\n<pre><code class=\"language-html\">\n<!-- Sadece dekoratif ikon -->\n<svg class=\"icon\" aria-hidden=\"true\">\n <use href=\"\/dist\/sprite.symbol.svg#icon-search\"><\/use>\n<\/svg> Arama\n\n<!-- Anlam\u0131 olan ikon -->\n<svg class=\"icon\" role=\"img\" aria-labelledby=\"iconSearchTitle iconSearchDesc\">\n <title id=\"iconSearchTitle\">Arama \u0130konu<\/title>\n <desc id=\"iconSearchDesc\">Site i\u00e7erisinde arama yapmak i\u00e7in kullan\u0131l\u0131r.<\/desc>\n <use href=\"\/dist\/sprite.symbol.svg#icon-search\"><\/use>\n<\/svg>\n <\/pre>\n<p><\/code><\/p>\n<h3>Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131m<\/h3>\n<p>SVG'ler vekt\u00f6r tabanl\u0131 oldu\u011fu i\u00e7in boyutland\u0131r\u0131ld\u0131klar\u0131nda kalitelerini kaybetmezler. CSS media query'leri ile farkl\u0131 ekran boyutlar\u0131na g\u00f6re ikonlar\u0131n boyutunu kolayca ayarlayabilirsiniz:<\/p>\n<pre><code class=\"language-css\">\n\/* Varsay\u0131lan ikon boyutu *\/\n.icon {\n font-size: 20px;\n}\n\n\/* K\u00fc\u00e7\u00fck ekranlar i\u00e7in *\/\n@media (max-width: 768px) {\n .icon {\n font-size: 18px;\n }\n .icon-large {\n font-size: 24px;\n }\n}\n\n\/* \u00c7ok k\u00fc\u00e7\u00fck ekranlar i\u00e7in *\/\n@media (max-width: 480px) {\n .icon {\n font-size: 16px;\n }\n .icon-large {\n font-size: 20px;\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu ileri d\u00fczey teknikler ve ger\u00e7ek d\u00fcnya senaryolar\u0131, <code>svg-sprite<\/code>'\u0131n sadece bir optimizasyon arac\u0131 olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda modern web uygulamalar\u0131n\u0131n geli\u015ftirme ve bak\u0131m s\u00fcre\u00e7lerini k\u00f6kten iyile\u015ftiren g\u00fc\u00e7l\u00fc bir bile\u015fen oldu\u011funu g\u00f6stermektedir.<\/p>\n<h2>SVG Sprite Olu\u015fturma S\u00fcrecini Nas\u0131l Otomatize Ederiz?<\/h2>\n<p>Manuel olarak her de\u011fi\u015fiklikte <code>svg-sprite<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmak, \u00f6zellikle b\u00fcy\u00fck ve aktif geli\u015ftirme projelerinde verimsiz olabilir. Bu s\u00fcreci otomatize etmek, geli\u015ftirme deneyimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirir ve hatalar\u0131 azalt\u0131r. .NET projelerinde bu otomasyonu sa\u011flamak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler mevcuttur; en yayg\u0131n olanlar\u0131 <code>npm<\/code> scriptleri, Gulp veya Webpack gibi build ara\u00e7lar\u0131d\u0131r.<\/p>\n<h3>Npm Scriptleri ile Otomasyon<\/h3>\n<p>\u00d6nceki b\u00f6l\u00fcmde g\u00f6sterdi\u011fimiz <code>package.json<\/code>'daki <code>build:svg-sprite<\/code> scripti, zaten bir otomasyon ad\u0131m\u0131d\u0131r. Ancak bunu daha da ileri g\u00f6t\u00fcrebiliriz:<\/p>\n<ul>\n<li>\n <strong>Geli\u015ftirme Modunda \u0130zleme (Watch Mode):<\/strong> SVG dosyalar\u0131nda bir de\u011fi\u015fiklik oldu\u011funda sprite'\u0131 otomatik olarak yeniden olu\u015fturmak i\u00e7in <code>nodemon<\/code> veya <code>onchange<\/code> gibi ara\u00e7lar\u0131 kullanabilirsiniz.<\/p>\n<pre><code>\nnpm install nodemon --save-dev\n <\/pre>\n<p><\/code><\/p>\n<pre><code>\n{\n \"name\": \"my-aspnet-core-app\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build:svg-sprite\": \"svg-sprite --mode symbol -s src\/icons -o wwwroot\/dist\",\n \"watch:svg-sprite\": \"nodemon --watch src\/icons --ext svg --exec \\\"npm run build:svg-sprite\\\"\"\n },\n \"devDependencies\": {\n \"svg-sprite\": \"^2.0.0\",\n \"nodemon\": \"^3.0.0\"\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Art\u0131k <code>npm run watch:svg-sprite<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, <code>src\/icons<\/code> klas\u00f6r\u00fcndeki herhangi bir SVG dosyas\u0131nda de\u011fi\u015fiklik yap\u0131ld\u0131\u011f\u0131nda sprite otomatik olarak g\u00fcncellenecektir.<\/p>\n<\/li>\n<li>\n <strong>Pre-build veya Post-build Entegrasyonu:<\/strong> .NET projenizin <code>.csproj<\/code> dosyas\u0131na bir <code>Target<\/code> ekleyerek, projenin build edilmesinden \u00f6nce (PreBuild) veya sonra (PostBuild) npm scriptini \u00e7al\u0131\u015ft\u0131rabilirsiniz. Bu, sprite'\u0131n her proje build edildi\u011finde g\u00fcncellenmesini sa\u011flar.<\/p>\n<pre><code class=\"language-xml\">\n<Project Sdk=\"Microsoft.NET.Sdk.Web\">\n\n <PropertyGroup>\n <TargetFramework>net8.0<\/TargetFramework>\n <Nullable>enable<\/Nullable>\n <ImplicitUsings>enable<\/ImplicitUsings>\n <\/PropertyGroup>\n\n <Target Name=\"BuildSvgSprite\" BeforeTargets=\"Build\">\n <Exec Command=\"npm install\" \/>\n <Exec Command=\"npm run build:svg-sprite\" \/>\n <\/Target>\n\n<\/Project>\n <\/pre>\n<p><\/code><\/p>\n<p>Bu <code>Target<\/code>, projeniz her derlendi\u011finde (Visual Studio'da Build veya <code>dotnet build<\/code> ile) npm paketlerini y\u00fckleyecek ve SVG sprite'\u0131 yeniden olu\u015fturacakt\u0131r.<\/p>\n<\/li>\n<\/ul>\n<h3>Gulp veya Webpack ile Daha Kapsaml\u0131 Otomasyon<\/h3>\n<p>Daha karma\u015f\u0131k front-end build s\u00fcre\u00e7leriniz varsa, Gulp veya Webpack gibi g\u00f6rev \u00e7al\u0131\u015ft\u0131r\u0131c\u0131lar (task runners) kullanarak <code>svg-sprite<\/code> entegrasyonunu daha da rafine edebilirsiniz.<\/p>\n<ul>\n<li>\n <strong>Gulp ile:<\/strong> Gulp, ak\u0131c\u0131 bir API ile g\u00f6revleri otomatikle\u015ftirmek i\u00e7in pop\u00fcler bir se\u00e7enektir. <code>gulp-svg-sprite<\/code> gibi eklentileri kullanarak kolayca entegrasyon sa\u011flayabilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ gulpfile.js\nconst { src, dest, watch, series } = require('gulp');\nconst svgSprite = require('gulp-svg-sprite');\n\nfunction generateSvgSprite() {\n return src('.\/src\/icons\/**\/*.svg')\n .pipe(svgSprite({\n mode: {\n symbol: {\n sprite: \"..\/sprite.symbol.svg\", \/\/ \u00c7\u0131kt\u0131 sprite ad\u0131\n render: {\n css: false,\n scss: false\n },\n example: false\n }\n },\n shape: {\n id: {\n generator: 'icon-%s' \/\/ \u0130kon ID'leri i\u00e7in \u00f6n ek\n }\n }\n }))\n .pipe(dest('.\/wwwroot\/dist\/'));\n}\n\nfunction watchSvg() {\n watch('.\/src\/icons\/**\/*.svg', generateSvgSprite);\n}\n\nexports.default = series(generateSvgSprite, watchSvg);\n <\/pre>\n<p><\/code>\n <\/li>\n<li>\n <strong>Webpack ile:<\/strong> Webpack, mod\u00fcl paketleyici olarak kullan\u0131l\u0131r ve <code>svg-sprite-loader<\/code> gibi loader'lar arac\u0131l\u0131\u011f\u0131yla SVG sprite olu\u015fturma yetene\u011fini entegre edebilirsiniz. Bu, React, Vue veya Angular gibi SPA (Single Page Application) geli\u015ftiren .NET projeleri i\u00e7in idealdir.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ webpack.config.js\nmodule.exports = {\n \/\/ ... di\u011fer yap\u0131land\u0131rmalar\n module: {\n rules: [\n {\n test: \/\\.svg$\/,\n include: \/src\\\/icons\/, \/\/ Sadece ikon klas\u00f6r\u00fcndeki SVG'ler i\u00e7in\n use: [\n {\n loader: 'svg-sprite-loader',\n options: {\n extract: true,\n spriteFilename: 'sprite.symbol.svg'\n }\n },\n 'svgo-loader' \/\/ SVG optimizasyonu i\u00e7in\n ]\n }\n ]\n },\n plugins: [\n \/\/ ... di\u011fer eklentiler\n new require('svg-sprite-loader\/plugin')()\n ]\n};\n <\/pre>\n<p><\/code>\n <\/li>\n<\/ul>\n<p>Bu otomasyon y\u00f6ntemleri, geli\u015ftirme verimlili\u011finizi art\u0131r\u0131r, tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve manuel hatalar\u0131 ortadan kald\u0131r\u0131r. Hangi y\u00f6ntemin projeniz i\u00e7in en uygun oldu\u011funu, projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve mevcut front-end build ara\u00e7 setine g\u00f6re belirleyebilirsiniz. Genellikle, basit .NET projeleri i\u00e7in <code>npm<\/code> scriptleri yeterliyken, SPA tarz\u0131 veya karma\u015f\u0131k front-end yap\u0131lar\u0131na sahip projeler i\u00e7in Gulp veya Webpack daha uygun olabilir.<\/p>\n<h2>svg-sprite Kullanarak Gelece\u011fin \u0130kon Y\u00f6netimine Ad\u0131m At\u0131n<\/h2>\n<p>Modern web geli\u015ftirme, s\u00fcrekli de\u011fi\u015fen beklentilerle dolu dinamik bir aland\u0131r. Kullan\u0131c\u0131lar daha h\u0131zl\u0131, daha ak\u0131c\u0131 ve daha eri\u015filebilir deneyimler talep ederken, geli\u015ftiriciler de bu talepleri kar\u015f\u0131layacak ara\u00e7lara ve tekniklere ihtiya\u00e7 duyar. \u0130\u015fte bu noktada <code>svg-sprite<\/code>, .NET geli\u015ftiricileri i\u00e7in ikon y\u00f6netimini yeniden tan\u0131mlayan g\u00fc\u00e7l\u00fc ve geli\u015ftirici dostu bir \u00e7\u00f6z\u00fcm olarak \u00f6ne \u00e7\u0131kmaktad\u0131r.<\/p>\n<p>Makale boyunca, <code>svg-sprite<\/code>'\u0131n ne oldu\u011fu, neden \u00f6nemli oldu\u011fu ve bir .NET Core projesine ad\u0131m ad\u0131m nas\u0131l entegre edilece\u011fi konular\u0131n\u0131 detayl\u0131 bir \u015fekilde ele ald\u0131k. SVG sprite'lar\u0131n sundu\u011fu performans avantajlar\u0131 \u2013 \u00f6zellikle azalan HTTP istekleri ve daha iyi \u00f6nbellekleme \u2013 g\u00fcn\u00fcm\u00fcz\u00fcn mobil odakl\u0131 web d\u00fcnyas\u0131nda kritik bir rol oynamaktad\u0131r. Ayr\u0131ca, ikonlar\u0131n CSS ile kolayca stilize edilebilir olmas\u0131, eri\u015filebilirlik standartlar\u0131na uygunluk ve otomasyon imkanlar\u0131, <code>svg-sprite<\/code>'\u0131 sadece bir optimizasyon arac\u0131 olmaktan \u00e7\u0131kar\u0131p, kapsaml\u0131 bir ikon y\u00f6netim sistemi haline getirmektedir.<\/p>\n<p>\u0130ster k\u00fc\u00e7\u00fck bir web sitesi, ister binlerce ikon bar\u0131nd\u0131ran b\u00fcy\u00fck bir e-ticaret platformu geli\u015ftiriyor olun, <code>svg-sprite<\/code>, ikon varl\u0131klar\u0131n\u0131z\u0131 daha verimli, daha bak\u0131m\u0131 kolay ve daha performansl\u0131 bir \u015fekilde y\u00f6netmenize olanak tan\u0131r. .NET'in sa\u011flam arka u\u00e7 g\u00fcc\u00fc ile <code>svg-sprite<\/code>'\u0131n modern front-end yeteneklerini birle\u015ftirerek, gelece\u011fin web uygulamalar\u0131n\u0131 in\u015fa etmeye bir ad\u0131m daha yakla\u015fabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<h4>svg-sprite sadece .NET projeleri i\u00e7in mi uygundur?<\/h4>\n<p>Hay\u0131r, <code>svg-sprite<\/code> Node.js tabanl\u0131 genel bir ara\u00e7t\u0131r ve herhangi bir web projesinde kullan\u0131labilir. .NET projeleri ba\u011flam\u0131nda ele almam\u0131z\u0131n nedeni, .NET ekosistemindeki geli\u015ftiricilere bu arac\u0131n entegrasyonunu g\u00f6stermek ve modern front-end build s\u00fcre\u00e7lerinin .NET ile nas\u0131l uyumlu \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 vurgulamakt\u0131r.<\/p>\n<h4>Dinamik ikon y\u00fckleme veya \"lazy loading\" m\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/h4>\n<p>Evet, m\u00fcmk\u00fcnd\u00fcr. <code>svg-sprite<\/code> ile olu\u015fturulan sprite dosyas\u0131 bir kez y\u00fcklendikten sonra, ikonlar\u0131 DOM'a ihtiya\u00e7 duyuldu\u011funda ekleyebilirsiniz. \u00d6zellikle b\u00fcy\u00fck sprite dosyalar\u0131 i\u00e7in, sprite dosyas\u0131n\u0131n kendisini de gerekti\u011finde (\u00f6rne\u011fin kullan\u0131c\u0131 belirli bir b\u00f6l\u00fcme kayd\u0131rd\u0131\u011f\u0131nda) y\u00fcklemek i\u00e7in \"lazy loading\" teknikleri uygulayabilirsiniz. Bunun i\u00e7in JavaScript ile sprite dosyas\u0131n\u0131 asenkron olarak fetch edip DOM'a eklemek gerekebilir.<\/p>\n<h4>Performans avantajlar\u0131 ne kadar belirgindir?<\/h4>\n<p>Performans avantajlar\u0131, projenizdeki ikon say\u0131s\u0131na ve mevcut ikon y\u00f6netimi y\u00f6nteminize ba\u011fl\u0131d\u0131r. \u00c7ok say\u0131da ikon kullanan ve her ikonu ayr\u0131 bir HTTP iste\u011fiyle y\u00fckleyen projelerde, <code>svg-sprite<\/code>'a ge\u00e7i\u015fle %20 ila %50 aras\u0131nda bir sayfa y\u00fckleme h\u0131z\u0131 iyile\u015fmesi g\u00f6zlemlemek nadir de\u011fildir. Azalan HTTP istekleri ve taray\u0131c\u0131 \u00f6nbellekleme yeteneklerinin artmas\u0131 bu iyile\u015fmenin ana fakt\u00f6rleridir.<\/p>\n<h4>Her SVG'yi sprite'a dahil etmeli miyim?<\/h4>\n<p>Genel olarak, evet. \u00d6zellikle web sitenizin veya uygulaman\u0131z\u0131n genelinde s\u0131k\u00e7a kullan\u0131lan k\u00fc\u00e7\u00fck, dekoratif veya UI ikonlar\u0131n\u0131 sprite'a dahil etmek en iyisidir. Ancak, \u00e7ok b\u00fcy\u00fck ve karma\u015f\u0131k grafikler veya nadiren kullan\u0131lan SVG'ler i\u00e7in, bunlar\u0131 sprite'a dahil etmek yerine ayr\u0131 SVG dosyalar\u0131 olarak b\u0131rakmak daha mant\u0131kl\u0131 olabilir. Sprite boyutu \u00e7ok b\u00fcy\u00fcd\u00fc\u011f\u00fcnde, ilk y\u00fckleme s\u00fcresi artabilir, bu nedenle bir denge bulmak \u00f6nemlidir.<\/p>\n<h4>Farkl\u0131 SVG ikonlar\u0131n\u0131n renklerini ve boyutlar\u0131n\u0131 CSS ile nas\u0131l y\u00f6netirim?<\/h4>\n<p>SVG'ler CSS ile kolayca stilize edilebilir. Sprite i\u00e7indeki <code><use><\/code> etiketiyle referans verdi\u011finiz <code><svg><\/code> elementine CSS s\u0131n\u0131flar\u0131 atayarak boyutunu (<code>font-size<\/code> ile <code>width<\/code>\/<code>height<\/code> ayarlayarak), rengini (<code>fill<\/code> ve <code>stroke<\/code> \u00f6zellikleri ile, \u00f6zellikle <code>currentColor<\/code> kullanarak) ve di\u011fer CSS \u00f6zelliklerini (<code>margin<\/code>, <code>padding<\/code> vb.) kontrol edebilirsiniz. Bu, ikonlar\u0131n\u0131z\u0131n tasar\u0131m dilinize kolayca uyum sa\u011flamas\u0131na olanak tan\u0131r.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon…","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":[1340],"tags":[],"class_list":{"0":"post-32560","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-net","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber<\/title>\n<meta name=\"description\" content=\"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite'\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.\" \/>\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\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite'\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-23T05:31:11+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=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-23T05:31:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\"},\"wordCount\":3521,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\".NET\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\",\"name\":\"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-23T05:31:11+00:00\",\"description\":\"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite'\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber\"}]},{\"@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-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber","description":"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite'\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.","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\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber","og_description":"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite'\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-23T05:31:11+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-23T05:31:11+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/"},"wordCount":3521,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":[".NET"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/","name":"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-23T05:31:11+00:00","description":"Web projelerinde modern ikon y\u00f6netimi, hem estetik hem de performans a\u00e7\u0131s\u0131ndan kritik bir \u00f6neme sahiptir. Y\u00fczlerce farkl\u0131 ikon kullanmak zorunda kalan geli\u015ftiriciler, genellikle ikonlar\u0131n y\u00fcklenme h\u0131z\u0131, dosya boyutlar\u0131 ve y\u00f6netim karma\u015f\u0131kl\u0131\u011f\u0131 gibi sorunlarla kar\u015f\u0131la\u015f\u0131r. Bu makale, .NET ekosistemindeki geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir SVG sprite jenerat\u00f6r\u00fc olan svg-sprite'\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayarak, bu yayg\u0131n zorluklar\u0131n \u00fcstesinden gelmenize yard\u0131mc\u0131 olacakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-sprite-ile-net-projelerinde-svg-ikon-yonetimi-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"svg-sprite ile .NET Projelerinde SVG \u0130kon Y\u00f6netimi: Kapsaml\u0131 Bir Rehber"}]},{"@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\/32560","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=32560"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32560\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}