Bu makalede, Power Apps'te SVG görüntülerini nasıl kullanabileceğinizi adım adım anlatacağım. SVG formatının Power Apps için neden en uygun görsel biçimi olduğunu ve uygulamanızda kullanabileceğiniz simgeleri nerede bulabileceğinizi öğreneceksiniz. Ayrıca, SVG görsellerin renk, dolgu, üzerine gelme efekti ve seçili durum dolgusu gibi stil özelliklerinin nasıl özelleştirileceğine dair sıkça sorulan sorulara da yanıt vereceğim.

Neden SVG Kullanmalıyız ?

Uygulamanızda JPEG gibi yaygın resim formatları yerine SVG kullanmayı tercih etmeniz için üç temel neden vardır:


  • Ölçeklenebilirlik: SVG görseller her boyutta net ve kaliteli kalır. 50 x 50 piksel ölçüsündeki bir SVG, 200 x 200 piksele çıkarıldığında dahi keskinliğini korur. Buna karşılık JPEG görseller büyütüldüğünde genellikle bulanıklaşır.
  • Dosya Boyutu: SVG dosyaları genellikle daha küçük boyutludur. Bu da uygulamanın daha hızlı yüklenmesini sağlar ve toplam uygulama boyutunu azaltır. SVG’ler, görüntüyü oluşturan şekillerin ve çizgilerin nasıl çizileceğine dair komutlar içerir; JPEG’ler ise her pikselin bilgisini barındırdığı için daha büyük olabilir.
  • Şeffaflık Desteği: SVG formatı, şeffaf arka planlara olanak tanır. Bu özellik, görsellerin uygulama temasıyla uyumlu olacak şekilde esnek biçimde kullanılmasına imkân verir. JPEG formatı ise şeffaflığı desteklemez.

Power Apps'te Kullanılacak SVG Görüntülerini Nerede Bulabilirim?


SVG Görüntülerini Power Apps'e Nasıl Eklerim?

Bu örnek için Bootstrap SVG İkon setini kullanacağız. Bootstrap web sitesine gidin ve uygulamamıza eklemek için bir SVG'ye tıklayın.Ben bisiklet simgesini seçtim.


SVG kodunu bulun ve panoya kopyalayın. SVG kodu bu şekilde görünür.



Ardından Power Apps'te Görüntü denetimini ekleyip ekleyin ve kodu Görüntü özelliğine yapıştırın. SVG kodunda aşağıdaki örneğe benzer şekilde bu değişiklikleri yapın.

  • Dosya türünü başlangıç verilerine ekleyin:image/svg+xml;utf8,
  • SVG kodunu bir EncodeURL işlevinin içine yapıştırın
  • SVG'deki çift tırnak işaretlerini (") tek tırnak (') ile değiştirin

"data:image/svg+xml;utf8, "&EncodeUrl("
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bicycle' viewBox='0 0 16 16'>
  <path d='M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1 1-.848.53l-.508-.812-2.076 3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-3.274L5 5.856V5h-.5a.5.5 0 0 1-.5-.5m1.5 2.443-.508.814c.5.444.85 1.054.967 1.743h1.139zM8 9.057 9.598 6.5H6.402zM4.937 9.5a2 2 0 0 0-.487-.877l-.548.877zM3.603 8.092A2 2 0 1 0 4.937 10.5H3a.5.5 0 0 1-.424-.765zm7.947.53a2 2 0 1 0 .848-.53l1.026 1.643a.5.5 0 1 1-.848.53z'/> 
</svg>")

SVG artık Power Apps'te görünecektir.


SVG rengini nasıl değiştirebilirim?

Power Apps'teki Görüntü denetiminin herhangi bir Color özelliği yoktur, bu nedenle SVG'yi doğrudan düzenlememiz gerekir. SVG'ye, rengi belirtmek için aşağıda gösterildiği gibi dilediğiniz bir rengin HEX kodunu ekleyin.

Görselde tam olarak yerleştirmeniz gereken kısmı işaretledim.

fill='#123456'
SVG simgesi artık farklı bir renge sahip olacak.

Oluşturmak istediğiniz örnekler ve yardımcı olma konusunda destek ihtiyacınız olduğunda alttaki yorumlar kısmından veya paylaşmış olduğum sosyal medya araçları vasıtasıyla iletişime geçebilirsiniz.