<\/code> ve <code><desc><\/code> etiketleri ile ikonlara anlaml\u0131 a\u00e7\u0131klamalar eklenerek eri\u015filebilirlik art\u0131r\u0131labilir.<\/li>\n<\/ul>\n<h3>Performans ve Dosya Boyutu<\/h3>\n<ul>\n<li><strong>K\u00fc\u00e7\u00fck Dosya Boyutlar\u0131:<\/strong> \u00d6zellikle basit ikonlar i\u00e7in SVG dosyalar\u0131 genellikle PNG veya JPG muadillerinden daha k\u00fc\u00e7\u00fckt\u00fcr. Vekt\u00f6rel yap\u0131s\u0131 sayesinde karma\u015f\u0131k olmayan \u015fekiller metin olarak ifade edildi\u011fi i\u00e7in dosya boyutu minimal kal\u0131r.<\/li>\n<li><strong>HTTP \u0130steklerini Azaltma:<\/strong> SVG ikonlar\u0131 do\u011frudan HTML i\u00e7ine g\u00f6m\u00fcld\u00fc\u011f\u00fcnde, taray\u0131c\u0131n\u0131n ek bir HTTP iste\u011fi yapmas\u0131na gerek kalmaz. Bu da sayfa y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r ve genel performans\u0131 art\u0131r\u0131r.<\/li>\n<\/ul>\n<h2>Vue.js’de SVG \u0130konlar\u0131n\u0131 Temel Kullan\u0131m Y\u00f6ntemleri<\/h2>\n<p>Vue.js projelerinizde SVG ikonlar\u0131n\u0131 kullanman\u0131n birka\u00e7 temel yolu vard\u0131r. Her birinin kendine g\u00f6re avantajlar\u0131 ve dezavantajlar\u0131 bulunur.<\/p>\n<h3>Inline SVG Kullan\u0131m\u0131<\/h3>\n<p>Bu y\u00f6ntem, SVG kodunu do\u011frudan Vue bile\u015feninizin \u015fablonuna yap\u0131\u015ft\u0131rmay\u0131 i\u00e7erir. En basit yakla\u015f\u0131md\u0131r ve herhangi bir ek yap\u0131land\u0131rma gerektirmez.<\/p>\n<pre><code class=\"language-html\"><template>\n <div class=\"icon-wrapper\">\n \n <svg\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n >\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2h1v1.93h-1zm7.93-1.07c-.49 3.95-3.85 7-7.93 7v-1h1c1.1 0 2-.9 2-2v-1l6.79-6.79c.12.58.21 1.17.21 1.79 0 4.08-3.05 7.44-7 7.93z\" \/>\n <\/svg>\n\n <span>Ayarlar<\/span>\n <\/div>\n<\/template>\n\n<style scoped>\n.icon-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #3498db; \/<em> SVG'nin fill=\"currentColor\" \u00f6zelli\u011fi sayesinde ikonun rengi de\u011fi\u015fir <\/em>\/\n}\n\n.icon-wrapper svg {\n transition: transform 0.3s ease;\n}\n\n.icon-wrapper:hover svg {\n transform: rotate(15deg);\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Ek HTTP iste\u011fi yok, CSS ile tam kontrol (renk, boyut, animasyon vb.), basit kurulum.<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> \u0130kon kodu tekrar\u0131, bile\u015fen dosyalar\u0131n\u0131 \u015fi\u015firebilir, ikon k\u00fct\u00fcphanesi b\u00fcy\u00fcd\u00fck\u00e7e y\u00f6netimi zorla\u015f\u0131r. K\u00fc\u00e7\u00fck, tek kullan\u0131ml\u0131k ikonlar i\u00e7in idealdir.<\/li>\n<li><code>fill=\"currentColor\"<\/code> kullan\u0131m\u0131, SVG’nin rengini \u00fcst \u00f6\u011fenin <code>color<\/code> CSS \u00f6zelli\u011fine g\u00f6re almas\u0131n\u0131 sa\u011flar, bu da tema y\u00f6netimini kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n<h3><code><img><\/code> Etiketi ile Harici SVG Dosyalar\u0131<\/h3>\n<p>SVG dosyalar\u0131n\u0131 bir resim dosyas\u0131 gibi <code><img><\/code> etiketi arac\u0131l\u0131\u011f\u0131yla kullanabilirsiniz. Bu, bir resim dosyas\u0131yla \u00e7al\u0131\u015fmaya benzer.<\/p>\n<pre><code class=\"language-html\"><template>\n <div>\n <img decoding=\"async\" src=\"@\/assets\/icons\/settings.svg\" alt=\"Ayarlar \u0130konu\" width=\"24\" height=\"24\" \/>\n <span>Ayarlar<\/span>\n <\/div>\n<\/template>\n\n<style scoped>\nimg {\n filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(200deg) brightness(90%) contrast(90%);\n \/<em> \u0130konun rengini de\u011fi\u015ftirmek i\u00e7in filter \u00f6zelli\u011fi kullan\u0131labilir, ancak s\u0131n\u0131rl\u0131d\u0131r. <\/em>\/\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Taray\u0131c\u0131 \u00f6nbellekleme, kolay kullan\u0131m (resim kullan\u0131r gibi).<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> SVG’nin i\u00e7eri\u011fine do\u011frudan CSS ile stil verilemez (renk, stroke vb. i\u00e7in <code>filter<\/code> gibi s\u0131n\u0131rl\u0131 y\u00f6ntemler kullan\u0131labilir), ek bir HTTP iste\u011fi gerektirir, eri\u015filebilirlik s\u0131n\u0131rl\u0131d\u0131r.<\/li>\n<li><code>@\/assets\/icons\/settings.svg<\/code> yolu, projenizin <code>assets<\/code> klas\u00f6r\u00fcndeki bir SVG dosyas\u0131na i\u015faret eder. Build arac\u0131 (Vite, Webpack) bu yolu otomatik olarak i\u015fleyecektir.<\/li>\n<\/ul>\n<h3>Vue Bile\u015feni Olarak SVG \u0130\u00e7eri Aktarma<\/h3>\n<p>Bu, Vue.js’de SVG ikonlar\u0131n\u0131 kullanman\u0131n en yayg\u0131n ve esnek yollar\u0131ndan biridir. SVG dosyalar\u0131n\u0131 do\u011frudan Vue bile\u015fenleri olarak i\u00e7e aktarman\u0131za olanak tan\u0131r. Bunun i\u00e7in genellikle bir build arac\u0131 eklentisine ihtiyac\u0131n\u0131z olacakt\u0131r (\u00f6rn. Vite i\u00e7in <code>vite-plugin-svg-loader<\/code>, Vue CLI i\u00e7in <code>@vue\/cli-plugin-svg-sprite<\/code> veya benzeri).<\/p>\n<p>\u00d6rnek olarak, Vite tabanl\u0131 bir projede <code>vite-plugin-svg-loader<\/code> kullanarak SVG’leri nas\u0131l bile\u015fen olarak i\u00e7eri aktaraca\u011f\u0131n\u0131z\u0131 g\u00f6sterelim:<\/p>\n<p><strong>1. Kurulum:<\/strong><\/p>\n<pre><code class=\"language-bash\">npm install -D vite-plugin-svg-loader\n<h2>veya<\/h2>\nyarn add -D vite-plugin-svg-loader\n<\/code><\/pre>\n<p><strong>2. <code>vite.config.js<\/code> dosyan\u0131z\u0131 g\u00fcncelleyin:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { defineConfig } from 'vite';\nimport vue from '@vitejs\/plugin-vue';\nimport svgLoader from 'vite-plugin-svg-loader'; \/\/ Eklentiyi i\u00e7eri aktar\n\nexport default defineConfig({\n plugins: [\n vue(),\n svgLoader({\n \/\/ Opsiyonel: Varsay\u0131lan ayarlar\u0131 \u00f6zelle\u015ftirebilirsiniz\n svgoConfig: {\n multipass: true,\n },\n }),\n ],\n});\n<\/code><\/pre>\n<p><strong>3. Vue Bile\u015feninizde Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><template>\n <div class=\"icon-container\">\n \n <SettingsIcon class=\"icon-style\" \/>\n <span>Ayarlar<\/span>\n <\/div>\n<\/template>\n\n<script setup>\nimport SettingsIcon from '@\/assets\/icons\/settings.svg?component'; \/\/ \u00d6nemli: ?component ile i\u00e7eri aktarma\n\n\/\/ Bile\u015fene prop ge\u00e7irmek isterseniz:\n\/\/ <SettingsIcon :width=\"32\" :height=\"32\" \/> \u015feklinde kullanabilirsiniz.\n\/\/ SVG dosyan\u0131zda width\/height tan\u0131ml\u0131 de\u011filse veya ge\u00e7ersizse bu prop'lar i\u015fe yarar.\n<\/script>\n\n<style scoped>\n.icon-container {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #27ae60;\n}\n\n.icon-style {\n \/<em> SVG bile\u015feninin rengini de\u011fi\u015ftirmek i\u00e7in fill veya color kullan\u0131n <\/em>\/\n fill: currentColor; \/<em> \u00dcst \u00f6\u011fenin color de\u011ferini al\u0131r <\/em>\/\n width: 28px;\n height: 28px;\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Yeniden kullan\u0131labilirlik, mod\u00fclerlik, kod tekrar\u0131n\u0131 azalt\u0131r, CSS ile tam kontrol, build zaman\u0131nda optimizasyon imkan\u0131.<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> Ek bir build arac\u0131 yap\u0131land\u0131rmas\u0131 gerektirir.<\/li>\n<li><code>?component<\/code> sorgu parametresi, Vite’a SVG dosyas\u0131n\u0131 Vue bile\u015feni olarak i\u015flemeyi s\u00f6yler.<\/li>\n<li>Bu y\u00f6ntem, SVG ikonlar\u0131n\u0131 merkezi bir yerden y\u00f6netmek ve projeniz genelinde tutarl\u0131 bir \u015fekilde kullanmak i\u00e7in en iyi yakla\u015f\u0131md\u0131r.<\/li>\n<\/ul>\n<h2>Yeniden Kullan\u0131labilir SVG \u0130kon Bile\u015fenleri Olu\u015fturma<\/h2>\n<p>Projeniz b\u00fcy\u00fcd\u00fck\u00e7e, her ikonu ayr\u0131 ayr\u0131 i\u00e7e aktarmak veya inline olarak kullanmak s\u00fcrd\u00fcr\u00fclemez hale gelebilir. Bu noktada, t\u00fcm ikonlar\u0131 y\u00f6neten merkezi bir <code>SvgIcon<\/code> bile\u015feni olu\u015fturmak en iyi \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<h3>Temel Bir <code>SvgIcon<\/code> Bile\u015feni<\/h3>\n<p>Bu bile\u015fen, ikonun ad\u0131n\u0131 bir prop olarak al\u0131r ve ilgili SVG i\u00e7eri\u011fini dinamik olarak render eder.<\/p>\n<p><strong>1. <code>components\/SvgIcon.vue<\/code> dosyas\u0131n\u0131 olu\u015fturun:<\/strong><\/p>\n<pre><code class=\"language-html\"><template>\n <svg\n v-if=\"iconComponent\"\n :class=\"['svg-icon', iconClass]\"\n :style=\"iconStyle\"\n v-bind=\"$attrs\"\n >\n <component :is=\"iconComponent\" \/>\n <\/svg>\n \n <span v-else class=\"svg-icon-placeholder\">?<\/span>\n<\/template>\n\n<script setup>\nimport { defineAsyncComponent, computed } from 'vue';\n\nconst props = defineProps({\n name: {\n type: String,\n required: true,\n },\n size: {\n type: [String, Number],\n default: 24,\n },\n color: {\n type: String,\n default: 'currentColor',\n },\n iconClass: {\n type: String,\n default: '',\n },\n});\n\n\/\/ T\u00fcm SVG ikonlar\u0131n\u0131 dinamik olarak i\u00e7eri aktarmak i\u00e7in\n\/\/ Vite'\u0131n glob import \u00f6zelli\u011fini kullan\u0131yoruz.\n\/\/ Bu, <code>@\/assets\/icons<\/code> alt\u0131ndaki t\u00fcm .svg dosyalar\u0131n\u0131 bir nesne olarak d\u00f6nd\u00fcr\u00fcr.\nconst icons = import.meta.glob('@\/assets\/icons\/*.svg', { as: 'component' });\n\nconst iconComponent = computed(() => {\n const iconPath = <code>\/src\/assets\/icons\/${props.name}.svg<\/code>;\n const iconModule = icons[iconPath];\n\n if (!iconModule) {\n console.warn(<code>SVG ikonu bulunamad\u0131: ${props.name}<\/code>);\n return null;\n }\n return defineAsyncComponent(() => iconModule());\n});\n\nconst iconStyle = computed(() => ({\n width: typeof props.size === 'number' ? <code>${props.size}px<\/code> : props.size,\n height: typeof props.size === 'number' ? <code>${props.size}px<\/code> : props.size,\n fill: props.color,\n stroke: props.color === 'currentColor' ? 'none' : props.color, \/\/ Varsay\u0131lan olarak stroke'u kapat\n}));\n<\/script>\n\n<style scoped>\n.svg-icon {\n display: inline-block;\n vertical-align: middle;\n flex-shrink: 0; \/<em> \u0130\u00e7erik k\u00fc\u00e7\u00fclse bile ikonun boyutunu koru <\/em>\/\n}\n\n.svg-icon-placeholder {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 4px;\n width: 24px;\n height: 24px;\n font-size: 14px;\n color: #888;\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>2. Uygulaman\u0131zda Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><template>\n <div class=\"app-container\">\n <h3>Uygulama Ayarlar\u0131<\/h3>\n <button>\n <SvgIcon name=\"settings\" :size=\"20\" color=\"#fff\" \/>\n <span>Ayarlar\u0131 A\u00e7<\/span>\n <\/button>\n\n <div class=\"notifications\">\n <SvgIcon name=\"bell\" size=\"28\" color=\"#e74c3c\" \/>\n <span>Yeni Bildirimler<\/span>\n <\/div>\n\n <div class=\"profile\">\n <SvgIcon name=\"user\" size=\"32\" icon-class=\"profile-icon\" \/>\n <span>Profilim<\/span>\n <\/div>\n\n <div>\n <SvgIcon name=\"non-existent-icon\" \/> \n <span>Bilinmeyen \u0130kon<\/span>\n <\/div>\n <\/div>\n<\/template>\n\n<script setup>\nimport SvgIcon from '@\/components\/SvgIcon.vue';\n<\/script>\n\n<style scoped>\n.app-container > div, .app-container > button {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n}\n\nbutton {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.notifications {\n color: #e74c3c; \/<em> bell ikonunun rengini override eder <\/em>\/\n}\n\n.profile-icon {\n \/<em> SvgIcon'a \u00f6zel stil s\u0131n\u0131f\u0131 <\/em>\/\n border: 1px solid #9b59b6;\n border-radius: 50%;\n padding: 2px;\n box-shadow: 0 0 5px rgba(155, 89, 182, 0.5);\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><code>import.meta.glob<\/code> (Vite) veya <code>require.context<\/code> (Webpack) gibi \u00f6zellikler, belirtilen klas\u00f6rdeki t\u00fcm SVG dosyalar\u0131n\u0131 dinamik olarak i\u00e7e aktarman\u0131za olanak tan\u0131r. Bu sayede her ikonu tek tek import etmek zorunda kalmazs\u0131n\u0131z.<\/li>\n<li><code>defineAsyncComponent<\/code> ile ikonlar sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklenir, bu da ba\u015flang\u0131\u00e7 performans\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<li>Props arac\u0131l\u0131\u011f\u0131yla <code>name<\/code>, <code>size<\/code>, <code>color<\/code> gibi \u00f6zellikleri kontrol etmek, ikonlar\u0131n\u0131z\u0131 \u00e7ok daha esnek hale getirir. <code>v-bind=\"$attrs\"<\/code> ile de SVG elementine do\u011frudan ek HTML nitelikleri (\u00f6rne\u011fin <code>role<\/code>, <code>aria-hidden<\/code>) ge\u00e7irebilirsiniz.<\/li>\n<li>\u0130kon bulunamad\u0131\u011f\u0131nda bir uyar\u0131 mesaj\u0131 veya placeholder g\u00f6stermek, geli\u015ftirme s\u00fcrecinde hatalar\u0131 fark etmenizi kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n<h3>SVG Sprite Haritalar\u0131 ile Kullan\u0131m<\/h3>\n<p>B\u00fcy\u00fck projelerde \u00e7ok say\u0131da ikon kullan\u0131l\u0131yorsa, t\u00fcm ikonlar\u0131 tek bir SVG dosyas\u0131 (sprite haritas\u0131) i\u00e7inde birle\u015ftirmek performans\u0131 daha da art\u0131rabilir. Taray\u0131c\u0131 tek bir HTTP iste\u011fi yapar ve t\u00fcm ikonlar\u0131 indirir. Daha sonra <code><use><\/code> etiketi ile sprite haritas\u0131ndaki belirli bir ikona referans verilir.<\/p>\n<p>Bu y\u00f6ntem genellikle \u00f6zel build ara\u00e7lar\u0131 (\u00f6rn. <code>svg-sprite-loader<\/code> veya <code>vite-plugin-svg-sprite<\/code>) ile entegre edilir. Olu\u015fturulan sprite dosyas\u0131 genellikle uygulaman\u0131n ba\u015flang\u0131c\u0131nda bir kez y\u00fcklenir.<\/p>\n<pre><code class=\"language-html\"><template>\n <div>\n \n <svg class=\"icon\" width=\"24\" height=\"24\">\n <use xlink:href=\"\/path\/to\/sprite.svg#icon-home\"><\/use>\n <\/svg>\n <span>Anasayfa<\/span>\n <\/div>\n<\/template>\n\n<style scoped>\n.icon {\n fill: #34495e; \/<em> \u0130konun rengini ayarlar <\/em>\/\n stroke: none;\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Tek HTTP iste\u011fi, daha iyi \u00f6nbellekleme, ikonlar\u0131 tek bir dosyada merkezi olarak y\u00f6netme.<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> Build arac\u0131 yap\u0131land\u0131rmas\u0131 daha karma\u015f\u0131k olabilir, <code><use><\/code> etiketi baz\u0131 eski taray\u0131c\u0131larda sorun \u00e7\u0131karabilir (polifill gerekebilir), CSS ile stil verme Inline SVG kadar esnek de\u011fildir (genellikle <code>fill<\/code> ve <code>stroke<\/code> ile s\u0131n\u0131rl\u0131d\u0131r).<\/li>\n<\/ul>\n<h2>Geli\u015fmi\u015f Kullan\u0131m ve Optimizasyon Stratejileri<\/h2>\n<p>SVG ikonlar\u0131n\u0131z\u0131 Vue.js projenizde daha etkin ve performansl\u0131 hale getirmek i\u00e7in baz\u0131 geli\u015fmi\u015f teknikler ve optimizasyon stratejileri uygulayabilirsiniz.<\/p>\n<h3>CSS ile Stil Verme ve Tema Y\u00f6netimi<\/h3>\n<p>SVG ikonlar\u0131n\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, CSS ile kolayca stil verilebilmesidir. \u00d6zellikle <code>currentColor<\/code> anahtar kelimesi, ikonlar\u0131n metin rengiyle uyumlu olmas\u0131n\u0131 sa\u011flayarak tema y\u00f6netimini basitle\u015ftirir.<\/p>\n<pre><code class=\"language-css\">\/<em> SvgIcon bile\u015feninizdeki veya do\u011frudan SVG elementinizdeki stiller <\/em>\/\n.svg-icon {\n width: 24px;\n height: 24px;\n fill: currentColor; \/<em> \u0130konun rengi, \u00fcst \u00f6\u011fenin 'color' \u00f6zelli\u011finden gelir <\/em>\/\n stroke: none; \/<em> Varsay\u0131lan stroke'u kapat <\/em>\/\n transition: fill 0.3s ease;\n}\n\n\/<em> Bir d\u00fc\u011fme \u00fczerindeki ikon <\/em>\/\nbutton .svg-icon {\n color: white; \/<em> \u0130kon beyaz olur <\/em>\/\n}\n\n\/<em> Hover durumunda ikonun rengini de\u011fi\u015ftirme <\/em>\/\n.menu-item:hover .svg-icon {\n fill: #f39c12; \/<em> Hover'da turuncu olur <\/em>\/\n}\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><code>currentColor<\/code> kullanarak ikonlar\u0131n\u0131z\u0131n uygulaman\u0131z\u0131n renk paletine otomatik olarak uyum sa\u011flamas\u0131n\u0131 sa\u011flayabilirsiniz.<\/li>\n<li><code>transition<\/code> \u00f6zellikleri ile ikonlara ho\u015f animasyonlar ekleyebilirsiniz (renk de\u011fi\u015fimi, d\u00f6n\u00fc\u015f\u00fcm vb.).<\/li>\n<li>CSS de\u011fi\u015fkenleri (<code>--primary-color<\/code>) kullanarak da ikon renklerini merkezi olarak y\u00f6netebilirsiniz.<\/li>\n<\/ul>\n<h3>Eri\u015filebilirlik (Accessibility)<\/h3>\n<p>T\u00fcm kullan\u0131c\u0131lar i\u00e7in kapsay\u0131c\u0131 bir deneyim sa\u011flamak amac\u0131yla SVG ikonlar\u0131n\u0131n eri\u015filebilirli\u011fini g\u00f6z ard\u0131 etmemek \u00f6nemlidir.<\/p>\n<pre><code class=\"language-html\">\n<svg aria-hidden=\"true\" focusable=\"false\">\n <path d=\"...\" \/>\n<\/svg>\n\n\n<svg role=\"img\" aria-labelledby=\"settings-title settings-desc\">\n <title id=\"settings-title\">Ayarlar<\/title>\n <desc id=\"settings-desc\">Uygulama ayarlar\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in d\u00fc\u011fme<\/desc>\n <path d=\"...\" \/>\n<\/svg>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Dekoratif ikonlar:<\/strong> Yaln\u0131zca g\u00f6rsel ama\u00e7l\u0131 kullan\u0131lan ikonlar i\u00e7in <code>aria-hidden=\"true\"<\/code> ve <code>focusable=\"false\"<\/code> (veya <code>tabindex=\"-1\"<\/code>) kullanarak ekran okuyucular\u0131n bu ikonlar\u0131 atlamas\u0131n\u0131 sa\u011flay\u0131n.<\/li>\n<li><strong>Anlaml\u0131 ikonlar:<\/strong> Bir eylemi veya bilgiyi temsil eden ikonlar i\u00e7in <code>role=\"img\"<\/code> kullan\u0131n ve <code><title><\/code> ile <code><desc><\/code> etiketleri arac\u0131l\u0131\u011f\u0131yla anlaml\u0131 metin a\u00e7\u0131klamalar\u0131 sa\u011flay\u0131n. <code><title><\/code> etiketi, ikonun k\u0131sa bir ad\u0131n\u0131, <code><desc><\/code> ise daha detayl\u0131 bir a\u00e7\u0131klamas\u0131n\u0131 vermelidir.<\/li>\n<li>\u0130kon bir d\u00fc\u011fme veya ba\u011flant\u0131 i\u00e7indeyse, d\u00fc\u011fme\/ba\u011flant\u0131 etiketinin eri\u015filebilir oldu\u011fundan emin olun (\u00f6rn. <code><button aria-label=\"Ayarlar\"><\/code>).<\/li>\n<\/ul>\n<h3>Otomatik Optimizasyon Ara\u00e7lar\u0131<\/h3>\n<p>SVG dosyalar\u0131 genellikle tasar\u0131m yaz\u0131l\u0131mlar\u0131ndan d\u0131\u015fa aktar\u0131ld\u0131\u011f\u0131nda gereksiz meta veriler, yorumlar, bo\u015fluklar ve hassasiyet bilgileri i\u00e7erebilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015f","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-38001","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - 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\/svg-ikonlari-neden-tercih-edilmeli\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-21T04:41:47+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=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?\",\"datePublished\":\"2026-01-21T04:41:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\"},\"wordCount\":1410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\",\"name\":\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-21T04:41:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?\"}]},{\"@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_head_json":{"title":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - 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\/svg-ikonlari-neden-tercih-edilmeli\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?","og_description":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015f","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-21T04:41:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?","datePublished":"2026-01-21T04:41:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/"},"wordCount":1410,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","name":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-21T04:41:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?"}]},{"@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\/38001","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=38001"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38001\/revisions"}],"predecessor-version":[{"id":38002,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38001\/revisions\/38002"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":38001,"date":"2026-01-21T07:41:47","date_gmt":"2026-01-21T04:41:47","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38001"},"modified":"2026-01-21T07:41:47","modified_gmt":"2026-01-21T04:41:47","slug":"svg-ikonlari-neden-tercih-edilmeli","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","title":{"rendered":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?"},"content":{"rendered":"

<\/p>\n

Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015fti\u011fi kritik bile\u015fenlerdir. Geleneksel olarak ikonlar i\u00e7in resim dosyalar\u0131 (PNG, JPG) veya ikon fontlar\u0131 (Font Awesome, Material Icons) kullan\u0131lsa da, SVG (Scalable Vector Graphics) ikonlar\u0131 g\u00fcn\u00fcm\u00fczde giderek daha pop\u00fcler hale gelmektedir. Bu rehberde, Vue.js projelerinizde SVG ikonlar\u0131n\u0131 nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi, farkl\u0131 y\u00f6ntemleri, en iyi uygulamalar\u0131 ve optimizasyon stratejilerini ele alaca\u011f\u0131z.<\/p>\n

SVG \u0130konlar\u0131 Neden Tercih Edilmeli?<\/h2>\n
SVG, vekt\u00f6rel tabanl\u0131 bir grafik format\u0131d\u0131r ve web i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r. Piksel tabanl\u0131 resim formatlar\u0131na g\u00f6re bir\u00e7ok avantaj sunar.<\/p>\n

Vekt\u00f6rel Olman\u0131n Avantajlar\u0131<\/h3>\n
\n
\u00d6l\u00e7eklenebilirlik:<\/strong> SVG ikonlar\u0131, \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131zd\u0131r. Yani, ister k\u00fc\u00e7\u00fck bir d\u00fc\u011fme \u00fczerinde ister b\u00fcy\u00fck bir ekranda kullan\u0131ls\u0131n, kalitelerini kaybetmeden sorunsuz bir \u015fekilde \u00f6l\u00e7eklenebilirler. Pikselle\u015fme veya bulan\u0131kla\u015fma sorunu ya\u015fanmaz. Bu, farkl\u0131 cihaz boyutlar\u0131na ve ekran yo\u011funluklar\u0131na sahip modern web ortamlar\u0131 i\u00e7in hayati \u00f6neme sahiptir.<\/li>\n
Netlik ve Keskinlik:<\/strong> Herhangi bir yak\u0131nla\u015ft\u0131rma seviyesinde veya farkl\u0131 ekran DPI’lar\u0131nda (Dots Per Inch) her zaman keskin ve net g\u00f6r\u00fcn\u00fcrler.<\/li>\n<\/ul>\n
Eri\u015filebilirlik ve Stil Esnekli\u011fi<\/h3>\n
\n
CSS ile Stil Verme:<\/strong> SVG ikonlar\u0131, do\u011frudan HTML i\u00e7ine g\u00f6m\u00fcld\u00fc\u011f\u00fcnde CSS ile kolayca stil verilebilir. `fill<\/code>, stroke<\/code>, color<\/code>, opacity<\/code>, transform<\/code> gibi CSS \u00f6zellikleri kullan\u0131larak renkleri, boyutlar\u0131 ve di\u011fer g\u00f6rsel \u00f6zellikleri dinamik olarak de\u011fi\u015ftirilebilir. Bu, tema y\u00f6netimi ve interaktif efektler i\u00e7in b\u00fcy\u00fck esneklik sa\u011flar.<\/li>\n`
Eri\u015filebilirlik (Accessibility):<\/strong> SVG i\u00e7eri\u011fi, HTML gibi metin tabanl\u0131 oldu\u011fu i\u00e7in ekran okuyucular taraf\u0131ndan okunabilir. <\/code> ve <code><desc><\/code> etiketleri ile ikonlara anlaml\u0131 a\u00e7\u0131klamalar eklenerek eri\u015filebilirlik art\u0131r\u0131labilir.<\/li>\n<\/ul>\n<h3>Performans ve Dosya Boyutu<\/h3>\n<ul>\n<li><strong>K\u00fc\u00e7\u00fck Dosya Boyutlar\u0131:<\/strong> \u00d6zellikle basit ikonlar i\u00e7in SVG dosyalar\u0131 genellikle PNG veya JPG muadillerinden daha k\u00fc\u00e7\u00fckt\u00fcr. Vekt\u00f6rel yap\u0131s\u0131 sayesinde karma\u015f\u0131k olmayan \u015fekiller metin olarak ifade edildi\u011fi i\u00e7in dosya boyutu minimal kal\u0131r.<\/li>\n<li><strong>HTTP \u0130steklerini Azaltma:<\/strong> SVG ikonlar\u0131 do\u011frudan HTML i\u00e7ine g\u00f6m\u00fcld\u00fc\u011f\u00fcnde, taray\u0131c\u0131n\u0131n ek bir HTTP iste\u011fi yapmas\u0131na gerek kalmaz. Bu da sayfa y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r ve genel performans\u0131 art\u0131r\u0131r.<\/li>\n<\/ul>\n<h2>Vue.js’de SVG \u0130konlar\u0131n\u0131 Temel Kullan\u0131m Y\u00f6ntemleri<\/h2>\n<p>Vue.js projelerinizde SVG ikonlar\u0131n\u0131 kullanman\u0131n birka\u00e7 temel yolu vard\u0131r. Her birinin kendine g\u00f6re avantajlar\u0131 ve dezavantajlar\u0131 bulunur.<\/p>\n<h3>Inline SVG Kullan\u0131m\u0131<\/h3>\n<p>Bu y\u00f6ntem, SVG kodunu do\u011frudan Vue bile\u015feninizin \u015fablonuna yap\u0131\u015ft\u0131rmay\u0131 i\u00e7erir. En basit yakla\u015f\u0131md\u0131r ve herhangi bir ek yap\u0131land\u0131rma gerektirmez.<\/p>\n<pre><code class=\"language-html\"><template>\n <div class=\"icon-wrapper\">\n \n <svg\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n >\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2h1v1.93h-1zm7.93-1.07c-.49 3.95-3.85 7-7.93 7v-1h1c1.1 0 2-.9 2-2v-1l6.79-6.79c.12.58.21 1.17.21 1.79 0 4.08-3.05 7.44-7 7.93z\" \/>\n <\/svg>\n\n <span>Ayarlar<\/span>\n <\/div>\n<\/template>\n\n<style scoped>\n.icon-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #3498db; \/<em> SVG'nin fill=\"currentColor\" \u00f6zelli\u011fi sayesinde ikonun rengi de\u011fi\u015fir <\/em>\/\n}\n\n.icon-wrapper svg {\n transition: transform 0.3s ease;\n}\n\n.icon-wrapper:hover svg {\n transform: rotate(15deg);\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Ek HTTP iste\u011fi yok, CSS ile tam kontrol (renk, boyut, animasyon vb.), basit kurulum.<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> \u0130kon kodu tekrar\u0131, bile\u015fen dosyalar\u0131n\u0131 \u015fi\u015firebilir, ikon k\u00fct\u00fcphanesi b\u00fcy\u00fcd\u00fck\u00e7e y\u00f6netimi zorla\u015f\u0131r. K\u00fc\u00e7\u00fck, tek kullan\u0131ml\u0131k ikonlar i\u00e7in idealdir.<\/li>\n<li><code>fill=\"currentColor\"<\/code> kullan\u0131m\u0131, SVG’nin rengini \u00fcst \u00f6\u011fenin <code>color<\/code> CSS \u00f6zelli\u011fine g\u00f6re almas\u0131n\u0131 sa\u011flar, bu da tema y\u00f6netimini kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n<h3><code><img><\/code> Etiketi ile Harici SVG Dosyalar\u0131<\/h3>\n<p>SVG dosyalar\u0131n\u0131 bir resim dosyas\u0131 gibi <code><img><\/code> etiketi arac\u0131l\u0131\u011f\u0131yla kullanabilirsiniz. Bu, bir resim dosyas\u0131yla \u00e7al\u0131\u015fmaya benzer.<\/p>\n<pre><code class=\"language-html\"><template>\n <div>\n <img decoding=\"async\" src=\"@\/assets\/icons\/settings.svg\" alt=\"Ayarlar \u0130konu\" width=\"24\" height=\"24\" \/>\n <span>Ayarlar<\/span>\n <\/div>\n<\/template>\n\n<style scoped>\nimg {\n filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(200deg) brightness(90%) contrast(90%);\n \/<em> \u0130konun rengini de\u011fi\u015ftirmek i\u00e7in filter \u00f6zelli\u011fi kullan\u0131labilir, ancak s\u0131n\u0131rl\u0131d\u0131r. <\/em>\/\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Taray\u0131c\u0131 \u00f6nbellekleme, kolay kullan\u0131m (resim kullan\u0131r gibi).<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> SVG’nin i\u00e7eri\u011fine do\u011frudan CSS ile stil verilemez (renk, stroke vb. i\u00e7in <code>filter<\/code> gibi s\u0131n\u0131rl\u0131 y\u00f6ntemler kullan\u0131labilir), ek bir HTTP iste\u011fi gerektirir, eri\u015filebilirlik s\u0131n\u0131rl\u0131d\u0131r.<\/li>\n<li><code>@\/assets\/icons\/settings.svg<\/code> yolu, projenizin <code>assets<\/code> klas\u00f6r\u00fcndeki bir SVG dosyas\u0131na i\u015faret eder. Build arac\u0131 (Vite, Webpack) bu yolu otomatik olarak i\u015fleyecektir.<\/li>\n<\/ul>\n<h3>Vue Bile\u015feni Olarak SVG \u0130\u00e7eri Aktarma<\/h3>\n<p>Bu, Vue.js’de SVG ikonlar\u0131n\u0131 kullanman\u0131n en yayg\u0131n ve esnek yollar\u0131ndan biridir. SVG dosyalar\u0131n\u0131 do\u011frudan Vue bile\u015fenleri olarak i\u00e7e aktarman\u0131za olanak tan\u0131r. Bunun i\u00e7in genellikle bir build arac\u0131 eklentisine ihtiyac\u0131n\u0131z olacakt\u0131r (\u00f6rn. Vite i\u00e7in <code>vite-plugin-svg-loader<\/code>, Vue CLI i\u00e7in <code>@vue\/cli-plugin-svg-sprite<\/code> veya benzeri).<\/p>\n<p>\u00d6rnek olarak, Vite tabanl\u0131 bir projede <code>vite-plugin-svg-loader<\/code> kullanarak SVG’leri nas\u0131l bile\u015fen olarak i\u00e7eri aktaraca\u011f\u0131n\u0131z\u0131 g\u00f6sterelim:<\/p>\n<p><strong>1. Kurulum:<\/strong><\/p>\n<pre><code class=\"language-bash\">npm install -D vite-plugin-svg-loader\n<h2>veya<\/h2>\nyarn add -D vite-plugin-svg-loader\n<\/code><\/pre>\n<p><strong>2. <code>vite.config.js<\/code> dosyan\u0131z\u0131 g\u00fcncelleyin:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { defineConfig } from 'vite';\nimport vue from '@vitejs\/plugin-vue';\nimport svgLoader from 'vite-plugin-svg-loader'; \/\/ Eklentiyi i\u00e7eri aktar\n\nexport default defineConfig({\n plugins: [\n vue(),\n svgLoader({\n \/\/ Opsiyonel: Varsay\u0131lan ayarlar\u0131 \u00f6zelle\u015ftirebilirsiniz\n svgoConfig: {\n multipass: true,\n },\n }),\n ],\n});\n<\/code><\/pre>\n<p><strong>3. Vue Bile\u015feninizde Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><template>\n <div class=\"icon-container\">\n \n <SettingsIcon class=\"icon-style\" \/>\n <span>Ayarlar<\/span>\n <\/div>\n<\/template>\n\n<script setup>\nimport SettingsIcon from '@\/assets\/icons\/settings.svg?component'; \/\/ \u00d6nemli: ?component ile i\u00e7eri aktarma\n\n\/\/ Bile\u015fene prop ge\u00e7irmek isterseniz:\n\/\/ <SettingsIcon :width=\"32\" :height=\"32\" \/> \u015feklinde kullanabilirsiniz.\n\/\/ SVG dosyan\u0131zda width\/height tan\u0131ml\u0131 de\u011filse veya ge\u00e7ersizse bu prop'lar i\u015fe yarar.\n<\/script>\n\n<style scoped>\n.icon-container {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #27ae60;\n}\n\n.icon-style {\n \/<em> SVG bile\u015feninin rengini de\u011fi\u015ftirmek i\u00e7in fill veya color kullan\u0131n <\/em>\/\n fill: currentColor; \/<em> \u00dcst \u00f6\u011fenin color de\u011ferini al\u0131r <\/em>\/\n width: 28px;\n height: 28px;\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Yeniden kullan\u0131labilirlik, mod\u00fclerlik, kod tekrar\u0131n\u0131 azalt\u0131r, CSS ile tam kontrol, build zaman\u0131nda optimizasyon imkan\u0131.<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> Ek bir build arac\u0131 yap\u0131land\u0131rmas\u0131 gerektirir.<\/li>\n<li><code>?component<\/code> sorgu parametresi, Vite’a SVG dosyas\u0131n\u0131 Vue bile\u015feni olarak i\u015flemeyi s\u00f6yler.<\/li>\n<li>Bu y\u00f6ntem, SVG ikonlar\u0131n\u0131 merkezi bir yerden y\u00f6netmek ve projeniz genelinde tutarl\u0131 bir \u015fekilde kullanmak i\u00e7in en iyi yakla\u015f\u0131md\u0131r.<\/li>\n<\/ul>\n<h2>Yeniden Kullan\u0131labilir SVG \u0130kon Bile\u015fenleri Olu\u015fturma<\/h2>\n<p>Projeniz b\u00fcy\u00fcd\u00fck\u00e7e, her ikonu ayr\u0131 ayr\u0131 i\u00e7e aktarmak veya inline olarak kullanmak s\u00fcrd\u00fcr\u00fclemez hale gelebilir. Bu noktada, t\u00fcm ikonlar\u0131 y\u00f6neten merkezi bir <code>SvgIcon<\/code> bile\u015feni olu\u015fturmak en iyi \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<h3>Temel Bir <code>SvgIcon<\/code> Bile\u015feni<\/h3>\n<p>Bu bile\u015fen, ikonun ad\u0131n\u0131 bir prop olarak al\u0131r ve ilgili SVG i\u00e7eri\u011fini dinamik olarak render eder.<\/p>\n<p><strong>1. <code>components\/SvgIcon.vue<\/code> dosyas\u0131n\u0131 olu\u015fturun:<\/strong><\/p>\n<pre><code class=\"language-html\"><template>\n <svg\n v-if=\"iconComponent\"\n :class=\"['svg-icon', iconClass]\"\n :style=\"iconStyle\"\n v-bind=\"$attrs\"\n >\n <component :is=\"iconComponent\" \/>\n <\/svg>\n \n <span v-else class=\"svg-icon-placeholder\">?<\/span>\n<\/template>\n\n<script setup>\nimport { defineAsyncComponent, computed } from 'vue';\n\nconst props = defineProps({\n name: {\n type: String,\n required: true,\n },\n size: {\n type: [String, Number],\n default: 24,\n },\n color: {\n type: String,\n default: 'currentColor',\n },\n iconClass: {\n type: String,\n default: '',\n },\n});\n\n\/\/ T\u00fcm SVG ikonlar\u0131n\u0131 dinamik olarak i\u00e7eri aktarmak i\u00e7in\n\/\/ Vite'\u0131n glob import \u00f6zelli\u011fini kullan\u0131yoruz.\n\/\/ Bu, <code>@\/assets\/icons<\/code> alt\u0131ndaki t\u00fcm .svg dosyalar\u0131n\u0131 bir nesne olarak d\u00f6nd\u00fcr\u00fcr.\nconst icons = import.meta.glob('@\/assets\/icons\/*.svg', { as: 'component' });\n\nconst iconComponent = computed(() => {\n const iconPath = <code>\/src\/assets\/icons\/${props.name}.svg<\/code>;\n const iconModule = icons[iconPath];\n\n if (!iconModule) {\n console.warn(<code>SVG ikonu bulunamad\u0131: ${props.name}<\/code>);\n return null;\n }\n return defineAsyncComponent(() => iconModule());\n});\n\nconst iconStyle = computed(() => ({\n width: typeof props.size === 'number' ? <code>${props.size}px<\/code> : props.size,\n height: typeof props.size === 'number' ? <code>${props.size}px<\/code> : props.size,\n fill: props.color,\n stroke: props.color === 'currentColor' ? 'none' : props.color, \/\/ Varsay\u0131lan olarak stroke'u kapat\n}));\n<\/script>\n\n<style scoped>\n.svg-icon {\n display: inline-block;\n vertical-align: middle;\n flex-shrink: 0; \/<em> \u0130\u00e7erik k\u00fc\u00e7\u00fclse bile ikonun boyutunu koru <\/em>\/\n}\n\n.svg-icon-placeholder {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 4px;\n width: 24px;\n height: 24px;\n font-size: 14px;\n color: #888;\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>2. Uygulaman\u0131zda Kullan\u0131m:<\/strong><\/p>\n<pre><code class=\"language-html\"><template>\n <div class=\"app-container\">\n <h3>Uygulama Ayarlar\u0131<\/h3>\n <button>\n <SvgIcon name=\"settings\" :size=\"20\" color=\"#fff\" \/>\n <span>Ayarlar\u0131 A\u00e7<\/span>\n <\/button>\n\n <div class=\"notifications\">\n <SvgIcon name=\"bell\" size=\"28\" color=\"#e74c3c\" \/>\n <span>Yeni Bildirimler<\/span>\n <\/div>\n\n <div class=\"profile\">\n <SvgIcon name=\"user\" size=\"32\" icon-class=\"profile-icon\" \/>\n <span>Profilim<\/span>\n <\/div>\n\n <div>\n <SvgIcon name=\"non-existent-icon\" \/> \n <span>Bilinmeyen \u0130kon<\/span>\n <\/div>\n <\/div>\n<\/template>\n\n<script setup>\nimport SvgIcon from '@\/components\/SvgIcon.vue';\n<\/script>\n\n<style scoped>\n.app-container > div, .app-container > button {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n}\n\nbutton {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.notifications {\n color: #e74c3c; \/<em> bell ikonunun rengini override eder <\/em>\/\n}\n\n.profile-icon {\n \/<em> SvgIcon'a \u00f6zel stil s\u0131n\u0131f\u0131 <\/em>\/\n border: 1px solid #9b59b6;\n border-radius: 50%;\n padding: 2px;\n box-shadow: 0 0 5px rgba(155, 89, 182, 0.5);\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><code>import.meta.glob<\/code> (Vite) veya <code>require.context<\/code> (Webpack) gibi \u00f6zellikler, belirtilen klas\u00f6rdeki t\u00fcm SVG dosyalar\u0131n\u0131 dinamik olarak i\u00e7e aktarman\u0131za olanak tan\u0131r. Bu sayede her ikonu tek tek import etmek zorunda kalmazs\u0131n\u0131z.<\/li>\n<li><code>defineAsyncComponent<\/code> ile ikonlar sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklenir, bu da ba\u015flang\u0131\u00e7 performans\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<li>Props arac\u0131l\u0131\u011f\u0131yla <code>name<\/code>, <code>size<\/code>, <code>color<\/code> gibi \u00f6zellikleri kontrol etmek, ikonlar\u0131n\u0131z\u0131 \u00e7ok daha esnek hale getirir. <code>v-bind=\"$attrs\"<\/code> ile de SVG elementine do\u011frudan ek HTML nitelikleri (\u00f6rne\u011fin <code>role<\/code>, <code>aria-hidden<\/code>) ge\u00e7irebilirsiniz.<\/li>\n<li>\u0130kon bulunamad\u0131\u011f\u0131nda bir uyar\u0131 mesaj\u0131 veya placeholder g\u00f6stermek, geli\u015ftirme s\u00fcrecinde hatalar\u0131 fark etmenizi kolayla\u015ft\u0131r\u0131r.<\/li>\n<\/ul>\n<h3>SVG Sprite Haritalar\u0131 ile Kullan\u0131m<\/h3>\n<p>B\u00fcy\u00fck projelerde \u00e7ok say\u0131da ikon kullan\u0131l\u0131yorsa, t\u00fcm ikonlar\u0131 tek bir SVG dosyas\u0131 (sprite haritas\u0131) i\u00e7inde birle\u015ftirmek performans\u0131 daha da art\u0131rabilir. Taray\u0131c\u0131 tek bir HTTP iste\u011fi yapar ve t\u00fcm ikonlar\u0131 indirir. Daha sonra <code><use><\/code> etiketi ile sprite haritas\u0131ndaki belirli bir ikona referans verilir.<\/p>\n<p>Bu y\u00f6ntem genellikle \u00f6zel build ara\u00e7lar\u0131 (\u00f6rn. <code>svg-sprite-loader<\/code> veya <code>vite-plugin-svg-sprite<\/code>) ile entegre edilir. Olu\u015fturulan sprite dosyas\u0131 genellikle uygulaman\u0131n ba\u015flang\u0131c\u0131nda bir kez y\u00fcklenir.<\/p>\n<pre><code class=\"language-html\"><template>\n <div>\n \n <svg class=\"icon\" width=\"24\" height=\"24\">\n <use xlink:href=\"\/path\/to\/sprite.svg#icon-home\"><\/use>\n <\/svg>\n <span>Anasayfa<\/span>\n <\/div>\n<\/template>\n\n<style scoped>\n.icon {\n fill: #34495e; \/<em> \u0130konun rengini ayarlar <\/em>\/\n stroke: none;\n}\n<\/style>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong> Tek HTTP iste\u011fi, daha iyi \u00f6nbellekleme, ikonlar\u0131 tek bir dosyada merkezi olarak y\u00f6netme.<\/li>\n<li><strong>Dezavantajlar\u0131:<\/strong> Build arac\u0131 yap\u0131land\u0131rmas\u0131 daha karma\u015f\u0131k olabilir, <code><use><\/code> etiketi baz\u0131 eski taray\u0131c\u0131larda sorun \u00e7\u0131karabilir (polifill gerekebilir), CSS ile stil verme Inline SVG kadar esnek de\u011fildir (genellikle <code>fill<\/code> ve <code>stroke<\/code> ile s\u0131n\u0131rl\u0131d\u0131r).<\/li>\n<\/ul>\n<h2>Geli\u015fmi\u015f Kullan\u0131m ve Optimizasyon Stratejileri<\/h2>\n<p>SVG ikonlar\u0131n\u0131z\u0131 Vue.js projenizde daha etkin ve performansl\u0131 hale getirmek i\u00e7in baz\u0131 geli\u015fmi\u015f teknikler ve optimizasyon stratejileri uygulayabilirsiniz.<\/p>\n<h3>CSS ile Stil Verme ve Tema Y\u00f6netimi<\/h3>\n<p>SVG ikonlar\u0131n\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, CSS ile kolayca stil verilebilmesidir. \u00d6zellikle <code>currentColor<\/code> anahtar kelimesi, ikonlar\u0131n metin rengiyle uyumlu olmas\u0131n\u0131 sa\u011flayarak tema y\u00f6netimini basitle\u015ftirir.<\/p>\n<pre><code class=\"language-css\">\/<em> SvgIcon bile\u015feninizdeki veya do\u011frudan SVG elementinizdeki stiller <\/em>\/\n.svg-icon {\n width: 24px;\n height: 24px;\n fill: currentColor; \/<em> \u0130konun rengi, \u00fcst \u00f6\u011fenin 'color' \u00f6zelli\u011finden gelir <\/em>\/\n stroke: none; \/<em> Varsay\u0131lan stroke'u kapat <\/em>\/\n transition: fill 0.3s ease;\n}\n\n\/<em> Bir d\u00fc\u011fme \u00fczerindeki ikon <\/em>\/\nbutton .svg-icon {\n color: white; \/<em> \u0130kon beyaz olur <\/em>\/\n}\n\n\/<em> Hover durumunda ikonun rengini de\u011fi\u015ftirme <\/em>\/\n.menu-item:hover .svg-icon {\n fill: #f39c12; \/<em> Hover'da turuncu olur <\/em>\/\n}\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><code>currentColor<\/code> kullanarak ikonlar\u0131n\u0131z\u0131n uygulaman\u0131z\u0131n renk paletine otomatik olarak uyum sa\u011flamas\u0131n\u0131 sa\u011flayabilirsiniz.<\/li>\n<li><code>transition<\/code> \u00f6zellikleri ile ikonlara ho\u015f animasyonlar ekleyebilirsiniz (renk de\u011fi\u015fimi, d\u00f6n\u00fc\u015f\u00fcm vb.).<\/li>\n<li>CSS de\u011fi\u015fkenleri (<code>--primary-color<\/code>) kullanarak da ikon renklerini merkezi olarak y\u00f6netebilirsiniz.<\/li>\n<\/ul>\n<h3>Eri\u015filebilirlik (Accessibility)<\/h3>\n<p>T\u00fcm kullan\u0131c\u0131lar i\u00e7in kapsay\u0131c\u0131 bir deneyim sa\u011flamak amac\u0131yla SVG ikonlar\u0131n\u0131n eri\u015filebilirli\u011fini g\u00f6z ard\u0131 etmemek \u00f6nemlidir.<\/p>\n<pre><code class=\"language-html\">\n<svg aria-hidden=\"true\" focusable=\"false\">\n <path d=\"...\" \/>\n<\/svg>\n\n\n<svg role=\"img\" aria-labelledby=\"settings-title settings-desc\">\n <title id=\"settings-title\">Ayarlar<\/title>\n <desc id=\"settings-desc\">Uygulama ayarlar\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in d\u00fc\u011fme<\/desc>\n <path d=\"...\" \/>\n<\/svg>\n<\/code><\/pre>\n<p><strong>Pratik Bilgiler:<\/strong><\/p>\n<ul>\n<li><strong>Dekoratif ikonlar:<\/strong> Yaln\u0131zca g\u00f6rsel ama\u00e7l\u0131 kullan\u0131lan ikonlar i\u00e7in <code>aria-hidden=\"true\"<\/code> ve <code>focusable=\"false\"<\/code> (veya <code>tabindex=\"-1\"<\/code>) kullanarak ekran okuyucular\u0131n bu ikonlar\u0131 atlamas\u0131n\u0131 sa\u011flay\u0131n.<\/li>\n<li><strong>Anlaml\u0131 ikonlar:<\/strong> Bir eylemi veya bilgiyi temsil eden ikonlar i\u00e7in <code>role=\"img\"<\/code> kullan\u0131n ve <code><title><\/code> ile <code><desc><\/code> etiketleri arac\u0131l\u0131\u011f\u0131yla anlaml\u0131 metin a\u00e7\u0131klamalar\u0131 sa\u011flay\u0131n. <code><title><\/code> etiketi, ikonun k\u0131sa bir ad\u0131n\u0131, <code><desc><\/code> ise daha detayl\u0131 bir a\u00e7\u0131klamas\u0131n\u0131 vermelidir.<\/li>\n<li>\u0130kon bir d\u00fc\u011fme veya ba\u011flant\u0131 i\u00e7indeyse, d\u00fc\u011fme\/ba\u011flant\u0131 etiketinin eri\u015filebilir oldu\u011fundan emin olun (\u00f6rn. <code><button aria-label=\"Ayarlar\"><\/code>).<\/li>\n<\/ul>\n<h3>Otomatik Optimizasyon Ara\u00e7lar\u0131<\/h3>\n<p>SVG dosyalar\u0131 genellikle tasar\u0131m yaz\u0131l\u0131mlar\u0131ndan d\u0131\u015fa aktar\u0131ld\u0131\u011f\u0131nda gereksiz meta veriler, yorumlar, bo\u015fluklar ve hassasiyet bilgileri i\u00e7erebilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015f","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-38001","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - 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\/svg-ikonlari-neden-tercih-edilmeli\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015f\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-21T04:41:47+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=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?\",\"datePublished\":\"2026-01-21T04:41:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\"},\"wordCount\":1410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\",\"name\":\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-21T04:41:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?\"}]},{\"@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_head_json":{"title":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - 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\/svg-ikonlari-neden-tercih-edilmeli\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?","og_description":"Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn esteti\u011fi ve performans\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u0130konlar, bu iki unsurun birle\u015f","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-21T04:41:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?","datePublished":"2026-01-21T04:41:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/"},"wordCount":1410,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/","name":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-21T04:41:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ikonlari-neden-tercih-edilmeli\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG \u0130konlar\u0131 Neden Tercih Edilmeli?"}]},{"@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\/38001","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=38001"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38001\/revisions"}],"predecessor-version":[{"id":38002,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38001\/revisions\/38002"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

SVG \u0130konlar\u0131 Neden Tercih Edilmeli?<\/h2>\nSVG, vekt\u00f6rel tabanl\u0131 bir grafik format\u0131d\u0131r ve web i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r. Piksel tabanl\u0131 resim formatlar\u0131na g\u00f6re bir\u00e7ok avantaj sunar.<\/p>\n

SVG \u0130konlar\u0131 Neden Tercih Edilmeli?<\/h2>\n
SVG, vekt\u00f6rel tabanl\u0131 bir grafik format\u0131d\u0131r ve web i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r. Piksel tabanl\u0131 resim formatlar\u0131na g\u00f6re bir\u00e7ok avantaj sunar.<\/p>\n