Convert Android XML Vector to SVG

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

We can convert an Android XML vector to SVG for use on the web.

We have the following XML taken from the SVG repository with CC0 license:

<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>

You can only view it in Android Studio. But we can transform it into SVG as follows:

  • The <vector tag is transformed into <svg (both the opening and closing tags).
  • The android:viewportHeight=”512″ android:viewportWidth=”512″ attributes are changed to viewBox=”0 0 512 512″.
  • The android:width and android:height attributes are transformed to just widthheight.
  • The xmlns:android=”http://schemas.android.com/apk/res/android” attribute is transformed to xmlns=”http://www.w3.org/2000/svg”.
  • The path tags remain unchanged.
  • The android:fillColor attribute is transformed to fill.
  • The android:pathData attribute is transformed to d.
  • And we change the file extension from .xml to .svg.

With all these changes, we have our generated SVG:

<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>

And now we have the correctly transformed image.

Post Views: 78

Leave a Comment