{"id":30827,"date":"2025-10-02T14:41:00","date_gmt":"2025-10-02T11:41:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30827"},"modified":"2025-10-02T14:41:00","modified_gmt":"2025-10-02T11:41:00","slug":"svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/","title":{"rendered":"SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc"},"content":{"rendered":"

<\/p>\n

SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc<\/h2>\n

SVG (Scalable Vector Graphics), web \u00fczerinde \u00f6l\u00e7eklenebilir ve y\u00fcksek kaliteli grafikler olu\u015fturmak i\u00e7in kullan\u0131lan XML tabanl\u0131 bir vekt\u00f6r g\u00f6r\u00fcnt\u00fc format\u0131d\u0131r. Geleneksel raster (piksel tabanl\u0131) g\u00f6r\u00fcnt\u00fclerden farkl\u0131 olarak, SVG’ler \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131zd\u0131r; yani herhangi bir boyutta kalitelerini kaybetmeden b\u00fcy\u00fct\u00fclebilir veya k\u00fc\u00e7\u00fclt\u00fclebilirler. Bu \u00f6zellik, \u00f6zellikle \u00e7e\u015fitli ekran boyutlar\u0131na sahip cihazlarda (masa\u00fcst\u00fc bilgisayarlar, tabletler, cep telefonlar\u0131) duyarl\u0131 tasar\u0131m (responsive design) i\u00e7in SVG’yi vazge\u00e7ilmez k\u0131lar. Ancak, SVG’nin bu esnekli\u011finden tam olarak yararlanmak ve grafiklerinizin farkl\u0131 boyutlardaki kapsay\u0131c\u0131larda beklendi\u011fi gibi g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in preserveAspectRatio<\/code> niteli\u011fini anlamak hayati \u00f6nem ta\u015f\u0131r.<\/p>\n

Bu makalede, preserveAspectRatio<\/code> niteli\u011finin ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve SVG grafiklerinizin en boy oran\u0131n\u0131 ve konumland\u0131rmas\u0131n\u0131 nas\u0131l kontrol etti\u011fini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, bu niteli\u011fin farkl\u0131 de\u011ferlerinin pratik etkilerini \u00f6rneklerle a\u00e7\u0131klayacak ve duyarl\u0131 SVG tasar\u0131mlar\u0131nda kar\u015f\u0131la\u015f\u0131lan yayg\u0131n sorunlara \u00e7\u00f6z\u00fcmler sunaca\u011f\u0131z.<\/p>\n

preserveAspectRatio<\/code> Neden Gereklidir?<\/h3>\n

Bir SVG g\u00f6r\u00fcnt\u00fcs\u00fc, bir HTML belgesine yerle\u015ftirildi\u011finde veya bir CSS arka plan\u0131 olarak kullan\u0131ld\u0131\u011f\u0131nda, genellikle belirli bir alana (g\u00f6r\u00fcn\u00fcm alan\u0131 veya viewport) s\u0131\u011fd\u0131r\u0131lmas\u0131 gerekir. Bu g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n boyutu, SVG’nin kendi i\u00e7sel boyutlar\u0131ndan (genellikle viewBox<\/code> niteli\u011fi ile tan\u0131mlan\u0131r) farkl\u0131 olabilir. \u00d6rne\u011fin, 100×100 bir viewBox<\/code>‘a sahip bir SVG’yi 200×300 piksellik bir alana yerle\u015ftirmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda ne olur? Ya da 500×200 piksellik bir SVG’yi 100×100 piksellik bir kutuya s\u0131\u011fd\u0131rmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda?<\/p>\n

preserveAspectRatio<\/code> niteli\u011fi olmasayd\u0131 veya yanl\u0131\u015f kullan\u0131lsayd\u0131, SVG i\u00e7eri\u011fi genellikle g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 tamamen doldurmak i\u00e7in orant\u0131s\u0131z bir \u015fekilde uzar veya s\u0131k\u0131\u015f\u0131r, bu da g\u00f6r\u00fcnt\u00fcn\u00fcn bozulmas\u0131na (distortion) yol a\u00e7ar. Bir daire ovalle\u015febilir, bir kare dikd\u00f6rtgenle\u015febilir veya metinler okunmaz hale gelebilir. \u0130\u015fte tam da bu noktada preserveAspectRatio<\/code> devreye girer. Bu nitelik, SVG i\u00e7eri\u011finin en boy oran\u0131n\u0131 koruyarak (veya korumayarak) ve g\u00f6r\u00fcn\u00fcm alan\u0131 i\u00e7inde nas\u0131l hizalanaca\u011f\u0131n\u0131 belirleyerek bu t\u00fcr bozulmalar\u0131 \u00f6nlemenizi sa\u011flar.<\/p>\n

Temel SVG Kavramlar\u0131: viewBox<\/code>, width<\/code>, height<\/code> ve En Boy Oran\u0131<\/h3>\n

preserveAspectRatio<\/code> niteli\u011fini tam olarak anlamak i\u00e7in, SVG’deki baz\u0131 temel boyutland\u0131rma ve konumland\u0131rma kavramlar\u0131n\u0131 netle\u015ftirmemiz gerekir:<\/p>\n

viewBox<\/code> Niteli\u011fi<\/h4>\n

viewBox<\/code> niteli\u011fi, bir SVG i\u00e7indeki grafik i\u00e7eri\u011finin “i\u00e7sel koordinat sistemi”ni tan\u0131mlar. D\u00f6rt say\u0131dan olu\u015fur: min-x<\/code>, min-y<\/code>, width<\/code>, height<\/code>.
\n* min-x<\/code> ve min-y<\/code>: viewBox<\/code>‘\u0131n sol \u00fcst k\u00f6\u015fesinin koordinatlar\u0131n\u0131 belirler. Genellikle 0 0 olarak ayarlan\u0131r, bu da i\u00e7eri\u011fin sol \u00fcst k\u00f6\u015feden ba\u015flad\u0131\u011f\u0131 anlam\u0131na gelir.
\n* width<\/code> ve height<\/code>: viewBox<\/code>‘\u0131n geni\u015fli\u011fini ve y\u00fcksekli\u011fini tan\u0131mlar. Bu de\u011ferler, SVG i\u00e7eri\u011finin kendi “birimlerini” belirler. \u00d6rne\u011fin, viewBox=\"0 0 100 100\"<\/code> demek, SVG i\u00e7eri\u011finin 100 birim geni\u015fli\u011finde ve 100 birim y\u00fcksekli\u011finde bir alana \u00e7izildi\u011fini ifade eder. Bu birimler piksel, cm, in\u00e7 gibi ger\u00e7ek d\u00fcnya \u00f6l\u00e7\u00fc birimleri de\u011fildir; sadece bir referans sistemidir.<\/p>\n

viewBox<\/code> niteli\u011fi, SVG i\u00e7eri\u011finin herhangi bir boyutta \u00f6l\u00e7eklenebilmesini sa\u011flayan anahtar mekanizmad\u0131r. \u0130\u00e7erik, viewBox<\/code> taraf\u0131ndan tan\u0131mlanan bu soyut alana \u00e7izilir ve daha sonra bu alan, SVG’nin g\u00f6r\u00fcnt\u00fclendi\u011fi ger\u00e7ek d\u00fcnya boyutuna (viewport) \u00f6l\u00e7eklenir.<\/p>\n

width<\/code> ve height<\/code> Nitelikleri<\/h4>\n

Bir <\/code> eleman\u0131n\u0131n width<\/code> ve height<\/code> nitelikleri, SVG’nin taray\u0131c\u0131da veya ba\u015fka bir ortamda kaplayaca\u011f\u0131 fiziksel alan\u0131 (g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131) tan\u0131mlar. Bu de\u011ferler piksel (px), y\u00fczde (%), em, rem gibi CSS birimleriyle belirtilebilir.
\n* width=\"100%\"<\/code> ve height=\"100%\"<\/code>: SVG’nin bulundu\u011fu kapsay\u0131c\u0131 eleman\u0131n t\u00fcm geni\u015fli\u011fini ve y\u00fcksekli\u011fini kaplamas\u0131n\u0131 sa\u011flar. Bu, duyarl\u0131 tasar\u0131mlarda s\u0131k\u00e7a kullan\u0131l\u0131r.
\n* width=\"200\"<\/code> ve height=\"150\"<\/code>: SVG’nin tam olarak 200 piksel geni\u015fli\u011finde ve 150 piksel y\u00fcksekli\u011finde olaca\u011f\u0131n\u0131 belirtir.<\/p>\n

E\u011fer width<\/code> veya height<\/code> niteliklerinden biri belirtilmezse, taray\u0131c\u0131 genellikle varsay\u0131lan bir de\u011fer kullan\u0131r veya kapsay\u0131c\u0131ya g\u00f6re \u00f6l\u00e7ekler. E\u011fer her ikisi de belirtilmezse ve viewBox<\/code> varsa, SVG’nin en boy oran\u0131 viewBox<\/code>‘tan al\u0131n\u0131r ve varsay\u0131lan geni\u015flik genellikle 300px olarak ayarlan\u0131r (ancak bu taray\u0131c\u0131ya g\u00f6re de\u011fi\u015febilir).<\/p>\n

G\u00f6r\u00fcn\u00fcm Alan\u0131 (Viewport)<\/h4>\n

G\u00f6r\u00fcn\u00fcm alan\u0131, SVG’nin nihayetinde render edildi\u011fi fiziksel aland\u0131r. Bu alan, SVG eleman\u0131n\u0131n width<\/code> ve height<\/code> nitelikleri veya kapsay\u0131c\u0131 eleman\u0131n CSS boyutlar\u0131 taraf\u0131ndan belirlenir. preserveAspectRatio<\/code> niteli\u011fi, viewBox<\/code>‘\u0131n g\u00f6r\u00fcn\u00fcm alan\u0131 i\u00e7inde nas\u0131l \u00f6l\u00e7eklenece\u011fini ve konumland\u0131r\u0131laca\u011f\u0131n\u0131 belirler.<\/p>\n

En Boy Oran\u0131 (Aspect Ratio)<\/h4>\n

En boy oran\u0131, bir \u015feklin geni\u015fli\u011finin y\u00fcksekli\u011fine oran\u0131d\u0131r (geni\u015flik \/ y\u00fckseklik). \u00d6rne\u011fin, 16:9, 4:3 veya 1:1 (kare) gibi. SVG i\u00e7eri\u011finizin kendi bir viewBox<\/code>‘\u0131ndan t\u00fcretilmi\u015f bir en boy oran\u0131 vard\u0131r (\u00f6rne\u011fin, viewBox=\"0 0 100 50\"<\/code> i\u00e7in en boy oran\u0131 2:1’dir). G\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n da kendi bir en boy oran\u0131 vard\u0131r (\u00f6rne\u011fin, width=\"200\" height=\"100\"<\/code> i\u00e7in en boy oran\u0131 2:1’dir). preserveAspectRatio<\/code> niteli\u011fi, bu iki en boy oran\u0131 farkl\u0131 oldu\u011funda SVG i\u00e7eri\u011finin nas\u0131l davranaca\u011f\u0131n\u0131 kontrol eder.<\/p>\n

preserveAspectRatio<\/code> Niteli\u011finin Yap\u0131s\u0131<\/h3>\n

preserveAspectRatio<\/code> niteli\u011fi, iki ana b\u00f6l\u00fcmden olu\u015fan bir de\u011fer al\u0131r: align<\/code> (hizalama) ve iste\u011fe ba\u011fl\u0131 meetOrSlice<\/code> (s\u0131\u011fd\u0131rma veya kesme).<\/p>\n

\n  \n<\/svg><\/code><\/pre>\n
*   align<\/code> (Hizalama):<\/strong> Bu k\u0131s\u0131m, viewBox<\/code>‘\u0131n en boy oran\u0131 korunduktan sonra g\u00f6r\u00fcn\u00fcm alan\u0131 i\u00e7inde nereye hizalanaca\u011f\u0131n\u0131 belirler. Bu, x<\/code> ekseni (yatay) ve y<\/code> ekseni (dikey) i\u00e7in ayr\u0131 ayr\u0131 konumland\u0131rma se\u00e7enekleri sunar.
\n*   meetOrSlice<\/code> (S\u0131\u011fd\u0131rma veya Kesme):<\/strong> Bu iste\u011fe ba\u011fl\u0131 k\u0131s\u0131m, viewBox<\/code>‘\u0131n en boy oran\u0131 korunurken g\u00f6r\u00fcn\u00fcm alan\u0131na nas\u0131l s\u0131\u011fd\u0131r\u0131laca\u011f\u0131n\u0131 belirler. \u0130\u00e7eri\u011fin tamamen g\u00f6r\u00fcn\u00fcr olup olmayaca\u011f\u0131n\u0131 veya bir k\u0131sm\u0131n\u0131n kesilip kesilmeyece\u011fini kontrol eder.<\/p>\n
E\u011fer preserveAspectRatio<\/code> niteli\u011fi belirtilmezse, varsay\u0131lan de\u011feri xMidYMid meet<\/code>‘tir. Bu, i\u00e7eri\u011fin en boy oran\u0131n\u0131 korurken g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n ortas\u0131na hizalanaca\u011f\u0131 ve i\u00e7eri\u011fin tamam\u0131n\u0131n g\u00f6r\u00fcn\u00fcr olaca\u011f\u0131 anlam\u0131na gelir.<\/p>\n
Hizalama (align<\/code>) De\u011ferleri Detayl\u0131 \u0130ncelenmesi<\/h3>\n
align<\/code> k\u0131sm\u0131, x<\/code> ekseni i\u00e7in \u00fc\u00e7 ve y<\/code> ekseni i\u00e7in \u00fc\u00e7 olas\u0131 konumland\u0131rma de\u011feri sunar. Bunlar birle\u015ftirilerek dokuz farkl\u0131 hizalama kombinasyonu olu\u015fturulur. Ayr\u0131ca, en boy oran\u0131n\u0131 korumayan bir none<\/code> de\u011feri de mevcuttur.<\/p>\n
x<\/code> Ekseni Hizalama De\u011ferleri:<\/strong>
\n*   xMin<\/code>:<\/strong> viewBox<\/code>‘\u0131n sol kenar\u0131, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sol kenar\u0131na hizalan\u0131r.
\n*   xMid<\/code>:<\/strong> viewBox<\/code>‘\u0131n yatay olarak ortas\u0131, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n yatay ortas\u0131na hizalan\u0131r.
\n*   xMax<\/code>:<\/strong> viewBox<\/code>‘\u0131n sa\u011f kenar\u0131, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sa\u011f kenar\u0131na hizalan\u0131r.<\/p>\n
y<\/code> Ekseni Hizalama De\u011ferleri:<\/strong>
\n*   YMin<\/code>:<\/strong> viewBox<\/code>‘\u0131n \u00fcst kenar\u0131, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n \u00fcst kenar\u0131na hizalan\u0131r.
\n*   YMid<\/code>:<\/strong> viewBox<\/code>‘\u0131n dikey olarak ortas\u0131, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n dikey ortas\u0131na hizalan\u0131r.
\n*   YMax<\/code>:<\/strong> viewBox<\/code>‘\u0131n alt kenar\u0131, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n alt kenar\u0131na hizalan\u0131r.<\/p>\n
Bu de\u011ferler birle\u015ftirilerek a\u015fa\u011f\u0131daki dokuz kombinasyon elde edilir:<\/p>\n
1.  xMinYMin<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sol \u00fcst k\u00f6\u015fesine hizalan\u0131r.
\n2.  xMidYMin<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n \u00fcst orta k\u0131sm\u0131na hizalan\u0131r.
\n3.  xMaxYMin<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sa\u011f \u00fcst k\u00f6\u015fesine hizalan\u0131r.
\n4.  xMinYMid<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n orta sol k\u0131sm\u0131na hizalan\u0131r.
\n5.  xMidYMid<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n tam ortas\u0131na hizalan\u0131r (varsay\u0131lan hizalama).
\n6.  xMaxYMid<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n orta sa\u011f k\u0131sm\u0131na hizalan\u0131r.
\n7.  xMinYMax<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sol alt k\u00f6\u015fesine hizalan\u0131r.
\n8.  xMidYMax<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n alt orta k\u0131sm\u0131na hizalan\u0131r.
\n9.  xMaxYMax<\/code>:<\/strong> \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sa\u011f alt k\u00f6\u015fesine hizalan\u0131r.<\/p>\n
none<\/code> De\u011feri:<\/strong><\/p>\n
*   none<\/code>:<\/strong> Bu de\u011fer, preserveAspectRatio<\/code> niteli\u011finin \u00f6zel bir durumudur. viewBox<\/code>‘\u0131n en boy oran\u0131n\u0131 korumaz. Bunun yerine, viewBox<\/code> i\u00e7eri\u011fini g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 tamamen dolduracak \u015fekilde orant\u0131s\u0131zca \u00f6l\u00e7ekler. Bu, i\u00e7eri\u011fin bozulmas\u0131na (gerilme veya s\u0131k\u0131\u015fma) neden olur. viewBox<\/code> ve g\u00f6r\u00fcn\u00fcm alan\u0131 farkl\u0131 en boy oranlar\u0131na sahip oldu\u011funda, none<\/code> de\u011feri i\u00e7eri\u011fi deforme eder. Bu genellikle istenmeyen bir durumdur, ancak bazen belirli sanatsal efektler veya \u00f6zel d\u00fczenler i\u00e7in kullan\u0131labilir.<\/p>\n
S\u0131\u011fd\u0131rma veya Kesme (meetOrSlice<\/code>) De\u011ferleri Detayl\u0131 \u0130ncelenmesi<\/h3>\n
meetOrSlice<\/code> k\u0131sm\u0131, align<\/code> de\u011feri taraf\u0131ndan belirlenen hizalamadan sonra, viewBox<\/code> i\u00e7eri\u011finin g\u00f6r\u00fcn\u00fcm alan\u0131na nas\u0131l \u00f6l\u00e7eklenece\u011fini belirler. \u0130ki olas\u0131 de\u011feri vard\u0131r: meet<\/code> ve slice<\/code>.<\/p>\n
meet<\/code> De\u011feri<\/h4>\n
   meet<\/code>:<\/strong> Bu, preserveAspectRatio<\/code>‘nun varsay\u0131lan meetOrSlice<\/code> de\u011feridir. viewBox<\/code>‘\u0131n en boy oran\u0131n\u0131 korur ve i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcm alan\u0131na <\/em>tamamen s\u0131\u011facak* \u015fekilde \u00f6l\u00e7ekler. Bu, viewBox<\/code>‘\u0131n t\u00fcm i\u00e7eri\u011finin g\u00f6r\u00fcn\u00fcr olaca\u011f\u0131 anlam\u0131na gelir. E\u011fer viewBox<\/code>‘\u0131n en boy oran\u0131 g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n en boy oran\u0131ndan farkl\u0131ysa, g\u00f6r\u00fcn\u00fcm alan\u0131nda bo\u015f alanlar (letterboxing veya pillarboxing) olu\u015fabilir. Bu bo\u015f alanlar, align<\/code> de\u011feri taraf\u0131ndan belirlenen kenarlarda veya ortada yer al\u0131r. meet<\/code> de\u011feri, i\u00e7eri\u011finizin asla kesilmemesini sa\u011flamak istedi\u011finizde idealdir.<\/p>\n
    *   \u00d6rnek:<\/strong> 1:1 en boy oran\u0131na sahip bir viewBox<\/code>‘\u0131 2:1 en boy oran\u0131na sahip bir g\u00f6r\u00fcn\u00fcm alan\u0131na meet<\/code> ile yerle\u015ftirdi\u011finizde, SVG i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n y\u00fcksekli\u011fine g\u00f6re \u00f6l\u00e7eklenir ve geni\u015fli\u011fin ortas\u0131na hizalan\u0131rsa, sa\u011fda ve solda bo\u015fluklar kal\u0131r.<\/p>\n
slice<\/code> De\u011feri<\/h4>\n
   slice<\/code>:<\/strong> Bu de\u011fer de viewBox<\/code>‘\u0131n en boy oran\u0131n\u0131 korur, ancak i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 <\/em>tamamen dolduracak* \u015fekilde \u00f6l\u00e7ekler. E\u011fer viewBox<\/code>‘\u0131n en boy oran\u0131 g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n en boy oran\u0131ndan farkl\u0131ysa, viewBox<\/code> i\u00e7eri\u011finin bir k\u0131sm\u0131 g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n d\u0131\u015f\u0131na ta\u015fabilir ve bu k\u0131s\u0131mlar kesilir (k\u0131rp\u0131l\u0131r). slice<\/code> de\u011feri, g\u00f6r\u00fcn\u00fcm alan\u0131nda hi\u00e7bir bo\u015f alan kalmamas\u0131n\u0131 ve i\u00e7eri\u011fin g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 tamamen kaplamas\u0131n\u0131 istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
    *   \u00d6rnek:<\/strong> Ayn\u0131 1:1 en boy oran\u0131na sahip viewBox<\/code>‘\u0131 2:1 en boy oran\u0131na sahip bir g\u00f6r\u00fcn\u00fcm alan\u0131na slice<\/code> ile yerle\u015ftirdi\u011finizde, SVG i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenir. \u0130\u00e7eri\u011fin dikey olarak bir k\u0131sm\u0131 g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n d\u0131\u015f\u0131na ta\u015far ve kesilir.<\/p>\n
Pratik Kullan\u0131m Senaryolar\u0131 ve \u00d6rnekler<\/h3>\n
preserveAspectRatio<\/code> niteli\u011finin farkl\u0131 de\u011ferlerinin pratikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in baz\u0131 yayg\u0131n senaryolar\u0131 inceleyelim. T\u00fcm \u00f6rneklerde, bir <\/code> eleman\u0131n\u0131n i\u00e7inde basit bir \u015fekil (\u00f6rne\u011fin, bir dikd\u00f6rtgen veya daire) oldu\u011funu ve bu SVG’nin farkl\u0131 width<\/code> ve height<\/code> de\u011ferlerine sahip bir kapsay\u0131c\u0131ya yerle\u015ftirildi\u011fini varsayal\u0131m.<\/p>\n
Varsay\u0131m: viewBox=\"0 0 100 100\"<\/code> (yani 1:1 en boy oran\u0131).
\nG\u00f6r\u00fcn\u00fcm Alan\u0131: width=\"200\" height=\"100\"<\/code> (yani 2:1 en boy oran\u0131).<\/p>\n
1. Varsay\u0131lan Davran\u0131\u015f: preserveAspectRatio=\"xMidYMid meet\"<\/code><\/h4>\n
\n  \n<\/svg><\/code><\/pre>\n
*   A\u00e7\u0131klama:<\/strong> viewBox<\/code> (100×100) ve g\u00f6r\u00fcn\u00fcm alan\u0131 (200×100) farkl\u0131 en boy oranlar\u0131na sahiptir. meet<\/code> de\u011feri, 100×100’l\u00fck i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcm alan\u0131na tamamen s\u0131\u011fd\u0131r\u0131r. \u0130\u00e7erik, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n y\u00fcksekli\u011fine (100 birim) g\u00f6re \u00f6l\u00e7eklenir, b\u00f6ylece 100 birim y\u00fcksekli\u011finde ve 100 birim geni\u015fli\u011finde kal\u0131r. Bu \u00f6l\u00e7eklendirilmi\u015f 100×100’l\u00fck i\u00e7erik, 200×100’l\u00fck g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n ortas\u0131na (xMidYMid<\/code>) hizalan\u0131r. Sonu\u00e7 olarak, SVG i\u00e7eri\u011fi 100×100 piksel boyutunda g\u00f6r\u00fcn\u00fcr ve g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n solunda ve sa\u011f\u0131nda 50’\u015fer piksellik bo\u015fluklar kal\u0131r. \u0130\u00e7erik bozulmaz ve tamamen g\u00f6r\u00fcn\u00fcrd\u00fcr.<\/p>\n
2. En Boy Oran\u0131n\u0131 Korumama: preserveAspectRatio=\"none\"<\/code><\/h4>\n
\n  \n<\/svg><\/code><\/pre>\n
*   A\u00e7\u0131klama:<\/strong> none<\/code> de\u011feri, viewBox<\/code>‘\u0131n en boy oran\u0131n\u0131 g\u00f6z ard\u0131 eder ve i\u00e7eri\u011fi g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 tamamen dolduracak \u015fekilde \u00f6l\u00e7ekler. 100×100’l\u00fck dikd\u00f6rtgen, 200×100’l\u00fck alana yay\u0131l\u0131r. Bu durumda, dikd\u00f6rtgen orant\u0131s\u0131z bir \u015fekilde uzayarak bir kare olmaktan \u00e7\u0131kar ve bir dikd\u00f6rtgen haline gelir. \u0130\u00e7erik bozulur ancak g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 tamamen doldurur.<\/p>\n
3. Farkl\u0131 Hizalama ve S\u0131\u011fd\u0131rma: preserveAspectRatio=\"xMinYMin meet\"<\/code><\/h4>\n
\n  \n<\/svg><\/code><\/pre>\n
*   A\u00e7\u0131klama:<\/strong> meet<\/code> de\u011feri nedeniyle dairenin en boy oran\u0131 korunur ve g\u00f6r\u00fcn\u00fcm alan\u0131na tamamen s\u0131\u011far. xMinYMin<\/code> de\u011feri, daireyi g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sol \u00fcst k\u00f6\u015fesine hizalar. 100×100’l\u00fck daire, g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n y\u00fcksekli\u011fine (100) g\u00f6re \u00f6l\u00e7eklenir ve sol \u00fcst k\u00f6\u015fede 100×100 piksel boyutunda g\u00f6r\u00fcn\u00fcr. G\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sa\u011f taraf\u0131nda 100 piksellik bo\u015fluk kal\u0131r.<\/p>\n
4. Kesme Davran\u0131\u015f\u0131: preserveAspectRatio=\"xMaxYMax slice\"<\/code><\/h4>\n
\n   \n<\/svg><\/code><\/pre>\n
*   A\u00e7\u0131klama:<\/strong> Burada viewBox<\/code> 1:1, g\u00f6r\u00fcn\u00fcm alan\u0131 ise 1:2’dir (100×200). slice<\/code> de\u011feri, \u00fc\u00e7genin en boy oran\u0131n\u0131 koruyarak g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131 tamamen dolduracak \u015fekilde \u00f6l\u00e7ekler. G\u00f6r\u00fcn\u00fcm alan\u0131 dikey olarak daha uzun oldu\u011fu i\u00e7in, \u00fc\u00e7gen g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n geni\u015fli\u011fine (100 birim) g\u00f6re \u00f6l\u00e7eklenir. Bu, \u00fc\u00e7genin 100 birim geni\u015fli\u011finde ve 100 birim y\u00fcksekli\u011finde olaca\u011f\u0131 anlam\u0131na gelir. Ancak g\u00f6r\u00fcn\u00fcm alan\u0131 200 birim y\u00fcksekli\u011findedir. xMaxYMax<\/code> hizalamas\u0131 nedeniyle, \u00fc\u00e7gen g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n sa\u011f alt k\u00f6\u015fesine hizalan\u0131r. \u00dc\u00e7genin \u00fcst k\u0131sm\u0131 g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n d\u0131\u015f\u0131na ta\u015far ve kesilir. G\u00f6r\u00fcn\u00fcm alan\u0131nda bo\u015fluk kalmaz.<\/p>\n
Duyarl\u0131 Tasar\u0131mda \u00d6nemi<\/h4>\n
preserveAspectRatio<\/code> niteli\u011fi, duyarl\u0131 SVG’ler olu\u015fturmak i\u00e7in temel bir ara\u00e7t\u0131r. Bir SVG’yi width=\"100%\"<\/code> ve height=\"auto\"<\/code> veya belirli bir padding-bottom<\/code> hilesiyle duyarl\u0131 hale getirdi\u011finizde, preserveAspectRatio<\/code> devreye girerek i\u00e7eri\u011fin farkl\u0131 ekran boyutlar\u0131nda nas\u0131l \u00f6l\u00e7eklenece\u011fini ve konumlanaca\u011f\u0131n\u0131 belirler.<\/p>\n
*   Logo veya \u0130konlar:<\/strong> Genellikle xMidYMid meet<\/code> kullan\u0131l\u0131r, b\u00f6ylece logo her zaman tamamen g\u00f6r\u00fcn\u00fcr olur ve ortalan\u0131r, etraf\u0131nda bo\u015fluk kalabilir.
\n*   Arka Plan G\u00f6rselleri:<\/strong> xMidYMid slice<\/code> kullan\u0131labilir, b\u00f6ylece g\u00f6rsel t\u00fcm alan\u0131 kaplar ve kenarlar\u0131 kesilse bile bo\u015fluk kalmaz.
\n*   Veri G\u00f6rselle\u015ftirmeleri:<\/strong> xMidYMid meet<\/code> tercih edilir, b\u00f6ylece t\u00fcm veri noktalar\u0131 g\u00f6r\u00fcn\u00fcr kal\u0131r.<\/p>\n
Dikkat Edilmesi Gerekenler ve En \u0130yi Uygulamalar<\/h3>\n
preserveAspectRatio<\/code> niteli\u011fini kullan\u0131rken ak\u0131lda tutulmas\u0131 gereken baz\u0131 \u00f6nemli noktalar ve en iyi uygulamalar \u015funlard\u0131r:<\/p>\n
1.  viewBox<\/code> Olmadan Anlams\u0131zd\u0131r:<\/strong> preserveAspectRatio<\/code> niteli\u011fi, yaln\u0131zca <\/code> eleman\u0131nda bir viewBox<\/code> niteli\u011fi tan\u0131mlanm\u0131\u015fsa bir etkiye sahiptir. viewBox<\/code> olmadan, SVG i\u00e7eri\u011fi genellikle width<\/code> ve height<\/code> niteliklerine veya kapsay\u0131c\u0131s\u0131na g\u00f6re do\u011frudan \u00f6l\u00e7eklenir ve preserveAspectRatio<\/code>‘nun bir etkisi olmaz.
\n2.  none<\/code> Kullan\u0131m\u0131na Dikkat:<\/strong> preserveAspectRatio=\"none\"<\/code> kullanmak, i\u00e7eri\u011fin bozulmas\u0131na neden olaca\u011f\u0131 i\u00e7in \u00e7o\u011fu zaman istenmeyen bir durumdur. Yaln\u0131zca belirli sanatsal efektler veya i\u00e7eri\u011fin esnetilmesinin kabul edilebilir oldu\u011fu durumlar i\u00e7in sakl\u0131 tutulmal\u0131d\u0131r.
\n3.  Do\u011fru meet<\/code> veya slice<\/code> Se\u00e7imi:<\/strong>
\n       \u0130\u00e7eri\u011finizin <\/em>tamam\u0131n\u0131n* her zaman g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 istiyorsan\u0131z (\u00f6rne\u011fin logolar, ikonlar, grafikler), meet<\/code> kullan\u0131n. Bo\u015f alanlar olu\u015fabilece\u011fini kabul edin.
\n       \u0130\u00e7eri\u011finizin <\/em>t\u00fcm alan\u0131 kaplamas\u0131n\u0131* ve bo\u015fluk b\u0131rakmamas\u0131n\u0131 istiyorsan\u0131z (\u00f6rne\u011fin arka plan g\u00f6rselleri, kapak foto\u011fraflar\u0131), slice<\/code> kullan\u0131n. \u0130\u00e7eri\u011fin bir k\u0131sm\u0131n\u0131n kesilebilece\u011fini kabul edin.
\n4.  Hizalama Se\u00e7imi:<\/strong> \u0130\u00e7eri\u011finizin g\u00f6r\u00fcn\u00fcm alan\u0131 i\u00e7inde nerede konumlanmas\u0131n\u0131 istedi\u011finizi dikkatlice d\u00fc\u015f\u00fcn\u00fcn. \u00c7o\u011fu durumda, xMidYMid<\/code> (merkezde) iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r, ancak tasar\u0131m\u0131n\u0131z\u0131n gereksinimlerine g\u00f6re di\u011fer hizalamalar\u0131 da kullanabilirsiniz.
\n5.  Varsay\u0131lan Davran\u0131\u015f\u0131 Anlay\u0131n:<\/strong> preserveAspectRatio<\/code> belirtilmedi\u011finde varsay\u0131lan\u0131n xMidYMid meet<\/code> oldu\u011funu unutmay\u0131n. Bu, bir\u00e7ok senaryo i\u00e7in uygun bir varsay\u0131lan olabilir, ancak \u00f6zel ihtiya\u00e7lar\u0131n\u0131z varsa a\u00e7\u0131k\u00e7a belirtmeniz gerekir.
\n6.  object-fit<\/code> ve object-position<\/code> ile Kar\u015f\u0131la\u015ft\u0131rma:<\/strong> HTML’deki <\/code> etiketi i\u00e7in CSS object-fit<\/code> ve object-position<\/code> \u00f6zellikleri, preserveAspectRatio<\/code>‘ya benzer bir i\u015flevsellik sunar. object-fit: contain<\/code> meet<\/code>‘e benzerken, object-fit: cover<\/code> slice<\/code>‘a benzer. object-fit: fill<\/code> ise none<\/code>‘a benzer. Bu \u00f6zellikler, SVG’yi bir <\/code> etiketi olarak kulland\u0131\u011f\u0131n\u0131zda da uygulanabilir ve bazen SVG i\u00e7indeki preserveAspectRatio<\/code>‘yu ge\u00e7ersiz k\u0131labilir veya onunla etkile\u015fime girebilir. Genellikle, SVG i\u00e7indeki preserveAspectRatio<\/code>‘yu kullanmak, SVG’nin kendi i\u00e7inde \u00f6l\u00e7ekleme mant\u0131\u011f\u0131n\u0131 ta\u015f\u0131mas\u0131 a\u00e7\u0131s\u0131ndan daha tutarl\u0131 bir yakla\u015f\u0131md\u0131r.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu<\/h3>\n
preserveAspectRatio<\/code> niteli\u011fi, SVG 1.1 standard\u0131n\u0131n bir par\u00e7as\u0131d\u0131r ve modern web taray\u0131c\u0131lar\u0131nda (Chrome, Firefox, Safari, Edge ve Opera dahil) m\u00fckemmel bir \u015fekilde desteklenir. Eski taray\u0131c\u0131larda veya \u00e7ok \u00f6zel durumlarda k\u00fc\u00e7\u00fck farkl\u0131l\u0131klar olabilse de, genel olarak g\u00fcvenle kullan\u0131labilir.<\/p>\n
Sonu\u00e7<\/h3>\n
preserveAspectRatio<\/code> niteli\u011fi, SVG’nin g\u00fcc\u00fcn\u00fc ve esnekli\u011fini tam olarak kullanman\u0131z\u0131 sa\u011flayan kritik bir ara\u00e7t\u0131r. Vekt\u00f6r grafiklerinizin farkl\u0131 boyutlardaki kapsay\u0131c\u0131larda orant\u0131l\u0131, hizal\u0131 ve bekledi\u011finiz gibi g\u00f6r\u00fcnmesini sa\u011flaman\u0131n anahtar\u0131d\u0131r. viewBox<\/code>, g\u00f6r\u00fcn\u00fcm alan\u0131, en boy oran\u0131 gibi temel kavramlar\u0131 ve align<\/code> ile meetOrSlice<\/code> de\u011ferlerinin etkilerini anlayarak, SVG grafiklerinizin duyarl\u0131 web tasar\u0131mlar\u0131n\u0131zda her zaman m\u00fckemmel g\u00f6r\u00fcnmesini sa\u011flayabilirsiniz.<\/p>\n
Bu niteli\u011fin do\u011fru kullan\u0131m\u0131, sadece g\u00f6rsel b\u00fct\u00fcnl\u00fc\u011f\u00fc korumakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini de iyile\u015ftirir. Bir dairenin ovalle\u015fti\u011fi veya bir logonun kesildi\u011fi bir web sitesi, profesyonellikten uzak bir izlenim b\u0131rakabilir. preserveAspectRatio<\/code> ile bu t\u00fcr sorunlar\u0131 ortadan kald\u0131rarak, tasar\u0131mlar\u0131n\u0131z\u0131n her cihazda ve her boyutta kusursuz bir \u015fekilde sunulmas\u0131n\u0131 sa\u011flayabilirsiniz. SVG’nin bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fini ustaca kullanarak, web \u00fczerindeki grafik deneyiminizi bir \u00fcst seviyeye ta\u015f\u0131yabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc\nSVG (Scalable Vector Graphics), web \u00fczerinde \u00f6l\u00e7eklenebilir","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":[132],"tags":[],"class_list":{"0":"post-30827","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-asp-net","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nSVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc - 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-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc\" \/>\n<meta property=\"og:description\" content=\"SVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc SVG (Scalable Vector Graphics), web \u00fczerinde \u00f6l\u00e7eklenebilir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-02T11:41:00+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc\",\"datePublished\":\"2025-10-02T11:41:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\"},\"wordCount\":2983,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"ASP.NET\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\",\"name\":\"SVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-02T11:41:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc\"}]},{\"@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 preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc - 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-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc","og_description":"SVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc SVG (Scalable Vector Graphics), web \u00fczerinde \u00f6l\u00e7eklenebilir","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-02T11:41:00+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc","datePublished":"2025-10-02T11:41:00+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/"},"wordCount":2983,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["ASP.NET"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/","name":"SVG preserveAspectRatio'yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-02T11:41:00+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-preserveaspectratioyu-anlamak-vektor-grafiklerinizde-oran-ve-hizalama-kontrolu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG preserveAspectRatio’yu Anlamak: Vekt\u00f6r Grafiklerinizde Oran ve Hizalama Kontrol\u00fc"}]},{"@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\/30827","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=30827"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30827\/revisions"}],"predecessor-version":[{"id":30828,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30827\/revisions\/30828"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}