Transformar vector Android XML a SVG

por
Tiempo de lectura: 2 minutos

Podemos transformar un vector Android XML a SVG para poder utilizarlo en web.

Tenemos el siguiente XML sacado de SVG repo con licencia CC0

<vector android:height="50dp" android:viewportHeight="512"
    android:viewportWidth="512" android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android">

    <path android:fillColor="#5D9BEB" android:pathData="M0,256.006C0,397.402 114.606,512.004 255.996,512C397.394,512.004 512,397.402 512,256.006C512.009,114.61 397.394,0 255.996,0C114.606,0 0,114.614 0,256.006z"/>
    <path android:fillColor="#4988DB" android:pathData="M507.859,301.669l-0.604,-0.554c-0.114,-0.118 -0.163,-0.283 -0.286,-0.395c0,0 -147.972,-147.983 -148.095,-148.095l-97.389,-89.274c-2.378,-2.163 -5.818,-2.75 -8.75,-1.441c-2.948,1.292 -4.85,4.208 -4.85,7.424v167.098l-0.611,-0.637c-0.055,-0.059 -81.347,-81.291 -81.405,-81.346l-1.401,-1.459c-3.107,-3.249 -8.251,-3.338 -11.476,-0.238c-3.234,3.107 -3.337,8.243 -0.238,11.476l89.9,93.641l-89.78,89.781c-3.17,3.169 -3.17,8.306 0,11.476c0.283,0.282 0.646,0.402 0.957,0.636c0.233,0.31 146.854,147.178 147.137,147.458c0.267,0.268 0.606,0.394 0.905,0.602C406.541,488.88 489,406.365 507.859,301.669z"/>

    <path android:fillColor="#F6F6F6" android:pathData="M265.376,258.1l93.751,-93.751c1.569,-1.562 2.426,-3.701 2.378,-5.913c-0.048,-2.211 -0.998,-4.311 -2.631,-5.809l-97.39,-89.274c-2.378,-2.163 -5.818,-2.75 -8.75,-1.442c-2.948,1.292 -4.85,4.208 -4.85,7.426v170.55l-83.417,-86.896c-3.107,-3.249 -8.251,-3.337 -11.476,-0.238c-3.234,3.107 -3.337,8.242 -0.238,11.476l89.9,93.641l-89.78,89.78c-3.17,3.17 -3.17,8.306 0,11.476c3.17,3.17 8.306,3.17 11.476,0l83.535,-83.535v167.071c0,3.147 1.823,6.016 4.676,7.347c1.093,0.515 2.267,0.769 3.44,0.769c1.862,0 3.709,-0.642 5.199,-1.878l97.39,-81.157c1.728,-1.442 2.782,-3.542 2.9,-5.786c0.127,-2.251 -0.689,-4.446 -2.243,-6.071L265.376,258.1zM264.116,87.788l77.543,71.076l-77.543,77.543L264.116,87.788L264.116,87.788zM264.116,425.338V280.228l77.386,80.619L264.116,425.338z"/>

</vector>

Solo podrás verlo en Android Studio. Pero podemos transformarlo a SVG de la siguiente forma:

  • La etiqueta <vector se transforma a <svg (tanto la de abrir como la de cerrar)
  • La etiqueta android:viewportHeight=»512″ android:viewportWidth=»512″ se cambian por viewBox=»0 0 512 512″
  • Las etiquetas android:width y android:height se transforman a width y height solo.
  • La etiqueta xmlns:android=»http://schemas.android.com/apk/res/android» se transforma a xmlns=»http://www.w3.org/2000/svg» .
  • Las etiquetas path se mantienen.
  • La etiqueta android:fillColor se transforma a fill
  • La etiqueta android:pathData se transforma a d
  • Y cambiamos la extensión de archivo de .xml a .svg

Con todos estos cambios ya tenemos nuestro svg generado. 

<svg height="50dp" viewBox="0 0 512 512" width="50dp" xmlns="http://www.w3.org/2000/svg" >

    <path fill="#5D9BEB" d="M0,256.006C0,397.402 114.606,512.004 255.996,512C397.394,512.004 512,397.402 512,256.006C512.009,114.61 397.394,0 255.996,0C114.606,0 0,114.614 0,256.006z"/>
    <path fill="#4988DB" d="M507.859,301.669l-0.604,-0.554c-0.114,-0.118 -0.163,-0.283 -0.286,-0.395c0,0 -147.972,-147.983 -148.095,-148.095l-97.389,-89.274c-2.378,-2.163 -5.818,-2.75 -8.75,-1.441c-2.948,1.292 -4.85,4.208 -4.85,7.424v167.098l-0.611,-0.637c-0.055,-0.059 -81.347,-81.291 -81.405,-81.346l-1.401,-1.459c-3.107,-3.249 -8.251,-3.338 -11.476,-0.238c-3.234,3.107 -3.337,8.243 -0.238,11.476l89.9,93.641l-89.78,89.781c-3.17,3.169 -3.17,8.306 0,11.476c0.283,0.282 0.646,0.402 0.957,0.636c0.233,0.31 146.854,147.178 147.137,147.458c0.267,0.268 0.606,0.394 0.905,0.602C406.541,488.88 489,406.365 507.859,301.669z"/>

    <path fill="#F6F6F6" d="M265.376,258.1l93.751,-93.751c1.569,-1.562 2.426,-3.701 2.378,-5.913c-0.048,-2.211 -0.998,-4.311 -2.631,-5.809l-97.39,-89.274c-2.378,-2.163 -5.818,-2.75 -8.75,-1.442c-2.948,1.292 -4.85,4.208 -4.85,7.426v170.55l-83.417,-86.896c-3.107,-3.249 -8.251,-3.337 -11.476,-0.238c-3.234,3.107 -3.337,8.242 -0.238,11.476l89.9,93.641l-89.78,89.78c-3.17,3.17 -3.17,8.306 0,11.476c3.17,3.17 8.306,3.17 11.476,0l83.535,-83.535v167.071c0,3.147 1.823,6.016 4.676,7.347c1.093,0.515 2.267,0.769 3.44,0.769c1.862,0 3.709,-0.642 5.199,-1.878l97.39,-81.157c1.728,-1.442 2.782,-3.542 2.9,-5.786c0.127,-2.251 -0.689,-4.446 -2.243,-6.071L265.376,258.1zM264.116,87.788l77.543,71.076l-77.543,77.543L264.116,87.788L264.116,87.788zM264.116,425.338V280.228l77.386,80.619L264.116,425.338z"/>

</svg>

Y ya tenemos la imagen transformada correctamente.

Post Views: 4

Deja un comentario