İçeriğe geç

HTML’e Gömülü SVG Logolar

ESP-WROOM-02(ESP-8266) modülü 32Mbit’lik (4Mbyte) oldukça geniş bir saklama alanına sahiptir. Bu nedenle gerçekleştireceğiniz IoT projelerde bu geniş alanı kullanmak maliyet avantajı sağlamaktadır. IoT projenizin Web tarafında koşan HTML, JS, CSS, JSON, XML kodları Arduino kodları içerisindeki String değişken alanlarına eklenebilmektedir. Fakat JPEG PNG ve GIF benzeri resim dosyaları kullanılması gerektiğinde kullanıcılar genelde harici NTFS ya da FAT dosya sistemine sahip SD Card kullanmayı tercih etmektedir. Alternatif olarak HTML5 ve sonrasında gelen ve Tüm tarayıcılar tarafından desteklenen bir versiyonunu bulabileceğiniz SVG(Scalable Vector Graphics) formatını kullanabilirsiniz. Modern Frontend web sistemlerinde artık PNG, JPG GIF ve benzeri dosyalar yavaş yavaş yüklenme hızları, yeniden boyutlandırıldıklarındaki kalite kayıpları, fazla yer kaplamaları ve tarayıcıda yorumlanmaları uzun sürmesi sebebiyle yerini SVG dosyalarına bırakmaktadır. Vektörel SVG görselleri minimalist tasarımları ve hızları nedeniyle masaüstü bilgisayar sistemlerinde tercih edildikleri kadar HTML içerisine yorumlanabilmeleri sebebiyle, gömülü sistemlerde kullanımı da artmaktadır.

Inkscape (www.inkscape.org) benzeri ücretsiz vektörel tasarım programları ile sizde firma logonuzu, özel ikonları ve sembolleri çizebilirsiniz. Hazırladığınız çizimleri SVG olarak kayıt ettiğinizde SVG dosyasını notepad++ ya da Windows Notepad benzeri bir programda kod olarak görebilir bu kodları kopyalayıp gömülü sisteminizdeki HTML içerisine yapıştırarak kolayca kullanabilirsiniz.

SVG Vektör Sembol Kaynağı : www.freepik.com, https://thenounproject.com/

Layer 1

Başlangıçta 100% boyutlarında çözünürlükleri aynı gözüken yukarıdaki resimlere i klavyenizdeki CTRL tuşuna basılı tutarak Mouse tuşlarının arasındaki scroll çemberini ileri doğru iterek sayfaya yakınlaştırınız. Yaklaştıkça üstteki PNG resimde kalite kaybı gözlenirken alttaki SVG resim çözünürlüğünde değişme olmayacaktır.

SVG resmi vektörel ve utf-8 karakter kodlamalı satırlardan oluşur. Bu sayede değişken içerisine atacağınız svg resim kodları tarayıcı tarafından resim olarak yorumlanır.

Örnek Kod:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
 <defs>
  <linearGradient spreadMethod="pad" id="svg_4">
   <stop offset="0" stop-color="#FF0000"/>
   <stop offset="0.909635" stop-color="#00ffff"/>
  </linearGradient>
 </defs>
 <g class="layer">
  <title>Layer 1</title>
  <path style="vector-effect: non-scaling-stroke;" transform="translate(232.441, 241.926) scale(1.5137, 1.49855) translate(-232.441, -241.926) translate(86.4414, 87.4766) scale(1.24658, 1.21366) translate(-86.4414, -87.4766)" id="svg_1" d="m211.151184,124.555771c-0.479431,-20.556831 -17.287872,-37.069435 -37.964508,-37.077255c-13.819244,0 -25.887939,7.392982 -32.513718,18.422684c-3.117188,-1.718491 -6.705872,-2.709427 -10.534241,-2.709427c-11.932915,0.008003 -21.643768,9.455101 -22.08345,21.300079c-12.532326,4.116211 -21.603867,15.841324 -21.611923,29.780258c0,17.343887 14.07489,31.426666 31.426788,31.426666l0,-0.008011l83.146469,0c17.351929,0 31.426697,-14.082809 31.426697,-31.42662c-0.007904,-13.819107 -8.92775,-25.496277 -21.292114,-29.708374zm-10.134583,50.664719l-83.154495,0c-11.573181,-0.031891 -20.932426,-9.382935 -20.956512,-20.956345c-0.007988,-10.382309 7.592972,-18.950226 17.55172,-20.588821c1.382767,-0.223801 2.629578,-0.999008 3.436836,-2.166c0.815125,-1.16687 1.110893,-2.605621 0.855087,-3.996201c-0.143799,-0.77533 -0.239769,-1.510773 -0.239769,-2.221924c0.023987,-6.418045 5.219139,-11.605286 11.62925,-11.621185c3.38884,0 6.378021,1.454643 8.559967,3.828461c1.214951,1.350693 3.069168,1.966064 4.851593,1.622498c1.790314,-0.343735 3.276932,-1.606606 3.916229,-3.300995c3.924164,-10.438255 13.947006,-17.871429 25.728104,-17.863342c15.185654,0.023895 27.46228,12.308632 27.50238,27.494308c0,0.847198 -0.04805,1.710449 -0.143906,2.605621c-0.255905,2.709381 1.598404,5.155212 4.268005,5.650711c9.74292,1.798416 17.151993,10.294449 17.135941,20.548874c-0.015976,11.573151 -9.367172,20.932449 -20.94043,20.96434zm-75.465622,50.824753c0,-5.83461 0.111862,-28.413696 0.111862,-28.453445c0.008041,-2.142166 -1.294769,-4.076157 -3.2929,-4.875595c-1.990097,-0.799118 -4.268005,-0.31163 -5.754593,1.254944c-0.032021,0.039978 -5.427017,5.746658 -10.901894,12.268524c-2.733528,3.284866 -5.482964,6.737762 -7.656853,9.926849c-2.093979,3.396759 -3.948456,5.586777 -4.251999,9.878723c0.015907,8.767853 7.105324,15.865219 15.88118,15.88118c8.759727,-0.015961 15.865196,-7.121399 15.865196,-15.88118zm-21.25222,0.239655c0.471519,-1.830292 5.658714,-9.007446 10.438232,-14.482498c0.127953,-0.151611 0.263786,-0.31958 0.399597,-0.46344c-0.031876,5.890442 -0.055855,12.012802 -0.055855,14.706284c0,2.973221 -2.413689,5.386948 -5.38707,5.394928c-2.901199,-0.00798 -5.258957,-2.2939 -5.394905,-5.155273zm59.992104,-0.239655c0,-5.83461 0.11171,-28.405594 0.11171,-28.437576c0.008102,-2.149902 -1.294662,-4.084122 -3.292664,-4.891464c-1.990189,-0.799118 -4.260117,-0.303528 -5.754791,1.262817c-0.031891,0.040085 -5.42688,5.730804 -10.901779,12.268646c-2.733475,3.261047 -5.482849,6.729767 -7.656937,9.918854c-2.094101,3.404724 -3.948181,5.594711 -4.243958,9.894714c0,8.751862 7.097382,15.857208 15.873077,15.857208c8.759964,-0.00798 15.865341,-7.113419 15.865341,-15.873199zm-21.260208,0.247833c0.479553,-1.830353 5.658752,-9.007736 10.438141,-14.482498c0.128036,-0.15979 0.255859,-0.311676 0.391678,-0.463715c-0.023819,5.882538 -0.05574,12.012985 -0.05574,14.69838c-0.016083,2.981293 -2.421799,5.379013 -5.3871,5.394928c-2.901352,-0.015915 -5.251083,-2.2939 -5.386978,-5.147095zm57.122818,-33.584824c-1.990112,-0.799301 -4.276016,-0.311508 -5.7547,1.254791c-0.047775,0.040024 -5.434952,5.74678 -10.901779,12.268723c-2.733536,3.276947 -5.490875,6.729736 -7.657104,9.934753c-2.101837,3.396759 -3.948181,5.586777 -4.251755,9.878723c0,8.751877 7.097321,15.865219 15.873016,15.865219c8.759903,0 15.857483,-7.113342 15.857483,-15.865219c0,-5.842545 0.11174,-28.421539 0.11174,-28.453445c0.015915,-2.142166 -1.28685,-4.084244 -3.276901,-4.883545zm-7.289276,33.33699c-0.024017,2.973221 -2.429611,5.379013 -5.403046,5.386948c-2.893234,-0.007935 -5.251099,-2.293762 -5.386703,-5.147293c0.487442,-1.822174 5.66658,-9.007446 10.437958,-14.482498c0.135925,-0.143814 0.263916,-0.303497 0.391739,-0.455536c-0.023972,5.882538 -0.039948,12.004898 -0.039948,14.69838z" stroke-width="0" stroke="#000000" fill="url(#svg_4)"/>
 </g>
</svg>
Tarih:Yazılar

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir