我可以在 Web 开发中使用 Android 矢量可绘制对象作为图像吗？
Can I use Android vector drawable in web development as image?
我可以在 ReactJS 中使用来自 android 的矢量可绘制对象作为图像吗？有可能吗？或者我需要将它转换成 SVG 然后 PNG 然后必须将它用于我的 React 项目？
我的示例 Android 矢量可绘制对象：
<vector android:height="80dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="80dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#b6b6b6" android:pathData="M421.054,414.843c-4.142,0 -7.5,3.358 -7.5,7.5v70.514c0,2.283 -1.858,4.141 -4.141,4.141h-40.317V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-81.185l23.543,-25.9c2.572,-2.83 3.785,-6.861 3.244,-10.787c-0.01,-0.076 -0.022,-0.152 -0.035,-0.228L277.24,327.617l6.041,-9.094c3.34,2.372 5.913,4.656 10.738,4.656c4.908,0 9.497,-2.747 11.755,-7.269v-0.001l23.65,-47.4l53.876,20.865c1.949,0.836 30.252,13.582 30.252,47.238v50.73c-0.001,4.141 3.357,7.5 7.5,7.5c4.142,0 7.5,-3.358 7.5,-7.5v-50.73c0,-44.344 -37.969,-60.463 -39.585,-61.128c-0.047,-0.02 -0.095,-0.039 -0.143,-0.057l-89.668,-34.726v-21.03c14.242,-11.076 24.117,-27.495 26.596,-46.227c7.101,-0.5 13.69,-3.152 19.071,-7.779c7.027,-6.043 11.059,-14.838 11.059,-24.126c0,-7.708 -2.781,-15.068 -7.737,-20.803V92.953C348.144,41.699 306.446,0 255.192,0c-51.254,0 -92.952,41.699 -92.952,92.953v28.511c-5.009,5.677 -7.733,12.665 -7.733,20.074c0,9.291 4.03,18.085 11.059,24.129c5.377,4.625 11.962,7.274 19.061,7.775c2.499,19.083 12.662,36.114 28.117,47.339v19.92l-89.571,34.725c-0.047,0.018 -0.094,0.037 -0.141,0.056c-1.617,0.665 -39.585,16.784 -39.585,61.128v156.245c0,10.555 8.587,19.142 19.142,19.142h71.457c4.142,0 7.5,-3.358 7.5,-7.5c0,-4.142 -3.358,-7.5 -7.5,-7.5h-16.137V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-40.319c-2.283,0 -4.141,-1.858 -4.141,-4.141V336.611c0,-33.769 28.493,-46.486 30.243,-47.234l53.834,-20.87l23.652,47.402c2.263,4.533 6.858,7.27 11.756,7.27c4.801,0 7.349,-2.249 10.738,-4.656l6.041,9.094l-22.421,132.468c-0.013,0.075 -0.024,0.15 -0.035,0.226c-0.542,3.924 0.671,7.957 3.244,10.789l23.543,25.9h-29.995c-4.142,0 -7.5,3.358 -7.5,7.5s3.358,7.5 7.5,7.5h200.365c10.555,0 19.142,-8.588 19.142,-19.142v-70.514C428.554,418.201 425.196,414.843 421.054,414.843zM315.375,263.069l-22.049,44.19c-0.548,-0.389 -12.233,-8.691 -26.517,-18.834c6.198,-7.651 -1.053,1.299 27.235,-33.617L315.375,263.069zM271.043,309.833l-5.718,8.607h-18.703l-5.718,-8.607l15.07,-10.703L271.043,309.833zM227.743,243.121v-14.036c9.112,3.673 18.85,5.376 28.36,5.376c9.833,0 19.476,-2.096 28.052,-5.846v14.567l-28.181,34.785L227.743,243.121zM340.881,141.539c-0.001,4.913 -2.129,9.562 -5.839,12.753c-2.453,2.11 -5.416,3.459 -8.661,3.987v-33.477C335.001,126.202 340.881,133.352 340.881,141.539zM184.007,158.279c-8.718,-1.415 -14.5,-8.623 -14.5,-16.741c0,-8.018 6.647,-14.544 14.5,-16.359V158.279zM184.41,109.896c-2.389,0.274 -5.127,0.921 -7.168,1.615V92.953c0,-42.983 34.968,-77.952 77.951,-77.952c42.983,0 77.951,34.969 77.951,77.952v18.043c-2.18,-0.663 -4.441,-1.101 -6.762,-1.307c0,-7.237 0.063,-5.841 -23.612,-31.294c-4.354,-4.678 -11.556,-5.658 -17.037,-2.077c-26.13,17.069 -58.005,25.644 -87.415,23.532C191.867,99.367 185.991,103.616 184.41,109.896zM199.008,164.184v-46.792v-2.465c32.375,1.896 66.318,-7.722 93.739,-25.283c10.858,11.658 16.738,17.773 18.634,20.099c0,5.884 0,47.705 0,54.44c0,30.447 -24.826,55.276 -55.277,55.276C221.91,219.46 199.008,192.934 199.008,164.184zM218.623,307.259l-22.049,-44.19l21.293,-8.247l27.241,33.625C231.255,298.284 219.88,306.366 218.623,307.259zM227.228,461.702l21.709,-128.263h14.071l21.709,128.263l-28.744,31.623L227.228,461.702z"/>
</vector>
您不能在 ReactJS 或正常 JavaScript 或 HTML/HTML5 中使用 Android 矢量可绘制对象。在使用之前，您必须将其转换为 SVG。
我已经在没有任何程序的情况下转换了您的 Android 矢量图。你也可以做——你只要非常专注地看我做了什么。这很简单。或者您也可以使用转换在线程序，例如：
https://shapeshifter.design
在这种情况下，您必须在代码中找到不可转换的部分，例如 Android 矢量可绘制格式（例如 @color/colorLightYellow 中的颜色值），然后将其替换为 [=12] 等十六进制格式的颜色值=].
例如，您必须先将 android:fillColor="@color/colorLightYellow" 更改为 android:fillColor="#fcab29"，然后您必须将其保存在单独的 XML 文件中，并使用此在线程序将其导入为 Android 矢量可绘制。导入后，您可以将其导出为 SVG 图像文件。
这是从您的 Android 矢量可绘制对象转换后的 SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 512 512">
<path fill="#b6b6b6" d="M421.054,414.843c-4.142,0 -7.5,3.358 -7.5,7.5v70.514c0,2.283 -1.858,4.141 -4.141,4.141h-40.317V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-81.185l23.543,-25.9c2.572,-2.83 3.785,-6.861 3.244,-10.787c-0.01,-0.076 -0.022,-0.152 -0.035,-0.228L277.24,327.617l6.041,-9.094c3.34,2.372 5.913,4.656 10.738,4.656c4.908,0 9.497,-2.747 11.755,-7.269v-0.001l23.65,-47.4l53.876,20.865c1.949,0.836 30.252,13.582 30.252,47.238v50.73c-0.001,4.141 3.357,7.5 7.5,7.5c4.142,0 7.5,-3.358 7.5,-7.5v-50.73c0,-44.344 -37.969,-60.463 -39.585,-61.128c-0.047,-0.02 -0.095,-0.039 -0.143,-0.057l-89.668,-34.726v-21.03c14.242,-11.076 24.117,-27.495 26.596,-46.227c7.101,-0.5 13.69,-3.152 19.071,-7.779c7.027,-6.043 11.059,-14.838 11.059,-24.126c0,-7.708 -2.781,-15.068 -7.737,-20.803V92.953C348.144,41.699 306.446,0 255.192,0c-51.254,0 -92.952,41.699 -92.952,92.953v28.511c-5.009,5.677 -7.733,12.665 -7.733,20.074c0,9.291 4.03,18.085 11.059,24.129c5.377,4.625 11.962,7.274 19.061,7.775c2.499,19.083 12.662,36.114 28.117,47.339v19.92l-89.571,34.725c-0.047,0.018 -0.094,0.037 -0.141,0.056c-1.617,0.665 -39.585,16.784 -39.585,61.128v156.245c0,10.555 8.587,19.142 19.142,19.142h71.457c4.142,0 7.5,-3.358 7.5,-7.5c0,-4.142 -3.358,-7.5 -7.5,-7.5h-16.137V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-40.319c-2.283,0 -4.141,-1.858 -4.141,-4.141V336.611c0,-33.769 28.493,-46.486 30.243,-47.234l53.834,-20.87l23.652,47.402c2.263,4.533 6.858,7.27 11.756,7.27c4.801,0 7.349,-2.249 10.738,-4.656l6.041,9.094l-22.421,132.468c-0.013,0.075 -0.024,0.15 -0.035,0.226c-0.542,3.924 0.671,7.957 3.244,10.789l23.543,25.9h-29.995c-4.142,0 -7.5,3.358 -7.5,7.5s3.358,7.5 7.5,7.5h200.365c10.555,0 19.142,-8.588 19.142,-19.142v-70.514C428.554,418.201 425.196,414.843 421.054,414.843zM315.375,263.069l-22.049,44.19c-0.548,-0.389 -12.233,-8.691 -26.517,-18.834c6.198,-7.651 -1.053,1.299 27.235,-33.617L315.375,263.069zM271.043,309.833l-5.718,8.607h-18.703l-5.718,-8.607l15.07,-10.703L271.043,309.833zM227.743,243.121v-14.036c9.112,3.673 18.85,5.376 28.36,5.376c9.833,0 19.476,-2.096 28.052,-5.846v14.567l-28.181,34.785L227.743,243.121zM340.881,141.539c-0.001,4.913 -2.129,9.562 -5.839,12.753c-2.453,2.11 -5.416,3.459 -8.661,3.987v-33.477C335.001,126.202 340.881,133.352 340.881,141.539zM184.007,158.279c-8.718,-1.415 -14.5,-8.623 -14.5,-16.741c0,-8.018 6.647,-14.544 14.5,-16.359V158.279zM184.41,109.896c-2.389,0.274 -5.127,0.921 -7.168,1.615V92.953c0,-42.983 34.968,-77.952 77.951,-77.952c42.983,0 77.951,34.969 77.951,77.952v18.043c-2.18,-0.663 -4.441,-1.101 -6.762,-1.307c0,-7.237 0.063,-5.841 -23.612,-31.294c-4.354,-4.678 -11.556,-5.658 -17.037,-2.077c-26.13,17.069 -58.005,25.644 -87.415,23.532C191.867,99.367 185.991,103.616 184.41,109.896zM199.008,164.184v-46.792v-2.465c32.375,1.896 66.318,-7.722 93.739,-25.283c10.858,11.658 16.738,17.773 18.634,20.099c0,5.884 0,47.705 0,54.44c0,30.447 -24.826,55.276 -55.277,55.276C221.91,219.46 199.008,192.934 199.008,164.184zM218.623,307.259l-22.049,-44.19l21.293,-8.247l27.241,33.625C231.255,298.284 219.88,306.366 218.623,307.259zM227.228,461.702l21.709,-128.263h14.071l21.709,128.263l-28.744,31.623L227.228,461.702z"/>
</svg>
我可以在 ReactJS 中使用来自 android 的矢量可绘制对象作为图像吗？有可能吗？或者我需要将它转换成 SVG 然后 PNG 然后必须将它用于我的 React 项目？
我的示例 Android 矢量可绘制对象：
<vector android:height="80dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="80dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#b6b6b6" android:pathData="M421.054,414.843c-4.142,0 -7.5,3.358 -7.5,7.5v70.514c0,2.283 -1.858,4.141 -4.141,4.141h-40.317V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-81.185l23.543,-25.9c2.572,-2.83 3.785,-6.861 3.244,-10.787c-0.01,-0.076 -0.022,-0.152 -0.035,-0.228L277.24,327.617l6.041,-9.094c3.34,2.372 5.913,4.656 10.738,4.656c4.908,0 9.497,-2.747 11.755,-7.269v-0.001l23.65,-47.4l53.876,20.865c1.949,0.836 30.252,13.582 30.252,47.238v50.73c-0.001,4.141 3.357,7.5 7.5,7.5c4.142,0 7.5,-3.358 7.5,-7.5v-50.73c0,-44.344 -37.969,-60.463 -39.585,-61.128c-0.047,-0.02 -0.095,-0.039 -0.143,-0.057l-89.668,-34.726v-21.03c14.242,-11.076 24.117,-27.495 26.596,-46.227c7.101,-0.5 13.69,-3.152 19.071,-7.779c7.027,-6.043 11.059,-14.838 11.059,-24.126c0,-7.708 -2.781,-15.068 -7.737,-20.803V92.953C348.144,41.699 306.446,0 255.192,0c-51.254,0 -92.952,41.699 -92.952,92.953v28.511c-5.009,5.677 -7.733,12.665 -7.733,20.074c0,9.291 4.03,18.085 11.059,24.129c5.377,4.625 11.962,7.274 19.061,7.775c2.499,19.083 12.662,36.114 28.117,47.339v19.92l-89.571,34.725c-0.047,0.018 -0.094,0.037 -0.141,0.056c-1.617,0.665 -39.585,16.784 -39.585,61.128v156.245c0,10.555 8.587,19.142 19.142,19.142h71.457c4.142,0 7.5,-3.358 7.5,-7.5c0,-4.142 -3.358,-7.5 -7.5,-7.5h-16.137V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-40.319c-2.283,0 -4.141,-1.858 -4.141,-4.141V336.611c0,-33.769 28.493,-46.486 30.243,-47.234l53.834,-20.87l23.652,47.402c2.263,4.533 6.858,7.27 11.756,7.27c4.801,0 7.349,-2.249 10.738,-4.656l6.041,9.094l-22.421,132.468c-0.013,0.075 -0.024,0.15 -0.035,0.226c-0.542,3.924 0.671,7.957 3.244,10.789l23.543,25.9h-29.995c-4.142,0 -7.5,3.358 -7.5,7.5s3.358,7.5 7.5,7.5h200.365c10.555,0 19.142,-8.588 19.142,-19.142v-70.514C428.554,418.201 425.196,414.843 421.054,414.843zM315.375,263.069l-22.049,44.19c-0.548,-0.389 -12.233,-8.691 -26.517,-18.834c6.198,-7.651 -1.053,1.299 27.235,-33.617L315.375,263.069zM271.043,309.833l-5.718,8.607h-18.703l-5.718,-8.607l15.07,-10.703L271.043,309.833zM227.743,243.121v-14.036c9.112,3.673 18.85,5.376 28.36,5.376c9.833,0 19.476,-2.096 28.052,-5.846v14.567l-28.181,34.785L227.743,243.121zM340.881,141.539c-0.001,4.913 -2.129,9.562 -5.839,12.753c-2.453,2.11 -5.416,3.459 -8.661,3.987v-33.477C335.001,126.202 340.881,133.352 340.881,141.539zM184.007,158.279c-8.718,-1.415 -14.5,-8.623 -14.5,-16.741c0,-8.018 6.647,-14.544 14.5,-16.359V158.279zM184.41,109.896c-2.389,0.274 -5.127,0.921 -7.168,1.615V92.953c0,-42.983 34.968,-77.952 77.951,-77.952c42.983,0 77.951,34.969 77.951,77.952v18.043c-2.18,-0.663 -4.441,-1.101 -6.762,-1.307c0,-7.237 0.063,-5.841 -23.612,-31.294c-4.354,-4.678 -11.556,-5.658 -17.037,-2.077c-26.13,17.069 -58.005,25.644 -87.415,23.532C191.867,99.367 185.991,103.616 184.41,109.896zM199.008,164.184v-46.792v-2.465c32.375,1.896 66.318,-7.722 93.739,-25.283c10.858,11.658 16.738,17.773 18.634,20.099c0,5.884 0,47.705 0,54.44c0,30.447 -24.826,55.276 -55.277,55.276C221.91,219.46 199.008,192.934 199.008,164.184zM218.623,307.259l-22.049,-44.19l21.293,-8.247l27.241,33.625C231.255,298.284 219.88,306.366 218.623,307.259zM227.228,461.702l21.709,-128.263h14.071l21.709,128.263l-28.744,31.623L227.228,461.702z"/>
</vector>
您不能在 ReactJS 或正常 JavaScript 或 HTML/HTML5 中使用 Android 矢量可绘制对象。在使用之前，您必须将其转换为 SVG。
我已经在没有任何程序的情况下转换了您的 Android 矢量图。你也可以做——你只要非常专注地看我做了什么。这很简单。或者您也可以使用转换在线程序，例如：
https://shapeshifter.design
在这种情况下，您必须在代码中找到不可转换的部分，例如 Android 矢量可绘制格式（例如 @color/colorLightYellow 中的颜色值），然后将其替换为 [=12] 等十六进制格式的颜色值=].
例如，您必须先将 android:fillColor="@color/colorLightYellow" 更改为 android:fillColor="#fcab29"，然后您必须将其保存在单独的 XML 文件中，并使用此在线程序将其导入为 Android 矢量可绘制。导入后，您可以将其导出为 SVG 图像文件。
这是从您的 Android 矢量可绘制对象转换后的 SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 512 512">
<path fill="#b6b6b6" d="M421.054,414.843c-4.142,0 -7.5,3.358 -7.5,7.5v70.514c0,2.283 -1.858,4.141 -4.141,4.141h-40.317V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-81.185l23.543,-25.9c2.572,-2.83 3.785,-6.861 3.244,-10.787c-0.01,-0.076 -0.022,-0.152 -0.035,-0.228L277.24,327.617l6.041,-9.094c3.34,2.372 5.913,4.656 10.738,4.656c4.908,0 9.497,-2.747 11.755,-7.269v-0.001l23.65,-47.4l53.876,20.865c1.949,0.836 30.252,13.582 30.252,47.238v50.73c-0.001,4.141 3.357,7.5 7.5,7.5c4.142,0 7.5,-3.358 7.5,-7.5v-50.73c0,-44.344 -37.969,-60.463 -39.585,-61.128c-0.047,-0.02 -0.095,-0.039 -0.143,-0.057l-89.668,-34.726v-21.03c14.242,-11.076 24.117,-27.495 26.596,-46.227c7.101,-0.5 13.69,-3.152 19.071,-7.779c7.027,-6.043 11.059,-14.838 11.059,-24.126c0,-7.708 -2.781,-15.068 -7.737,-20.803V92.953C348.144,41.699 306.446,0 255.192,0c-51.254,0 -92.952,41.699 -92.952,92.953v28.511c-5.009,5.677 -7.733,12.665 -7.733,20.074c0,9.291 4.03,18.085 11.059,24.129c5.377,4.625 11.962,7.274 19.061,7.775c2.499,19.083 12.662,36.114 28.117,47.339v19.92l-89.571,34.725c-0.047,0.018 -0.094,0.037 -0.141,0.056c-1.617,0.665 -39.585,16.784 -39.585,61.128v156.245c0,10.555 8.587,19.142 19.142,19.142h71.457c4.142,0 7.5,-3.358 7.5,-7.5c0,-4.142 -3.358,-7.5 -7.5,-7.5h-16.137V349.301c0,-4.142 -3.358,-7.5 -7.5,-7.5c-4.142,0 -7.5,3.358 -7.5,7.5v147.698h-40.319c-2.283,0 -4.141,-1.858 -4.141,-4.141V336.611c0,-33.769 28.493,-46.486 30.243,-47.234l53.834,-20.87l23.652,47.402c2.263,4.533 6.858,7.27 11.756,7.27c4.801,0 7.349,-2.249 10.738,-4.656l6.041,9.094l-22.421,132.468c-0.013,0.075 -0.024,0.15 -0.035,0.226c-0.542,3.924 0.671,7.957 3.244,10.789l23.543,25.9h-29.995c-4.142,0 -7.5,3.358 -7.5,7.5s3.358,7.5 7.5,7.5h200.365c10.555,0 19.142,-8.588 19.142,-19.142v-70.514C428.554,418.201 425.196,414.843 421.054,414.843zM315.375,263.069l-22.049,44.19c-0.548,-0.389 -12.233,-8.691 -26.517,-18.834c6.198,-7.651 -1.053,1.299 27.235,-33.617L315.375,263.069zM271.043,309.833l-5.718,8.607h-18.703l-5.718,-8.607l15.07,-10.703L271.043,309.833zM227.743,243.121v-14.036c9.112,3.673 18.85,5.376 28.36,5.376c9.833,0 19.476,-2.096 28.052,-5.846v14.567l-28.181,34.785L227.743,243.121zM340.881,141.539c-0.001,4.913 -2.129,9.562 -5.839,12.753c-2.453,2.11 -5.416,3.459 -8.661,3.987v-33.477C335.001,126.202 340.881,133.352 340.881,141.539zM184.007,158.279c-8.718,-1.415 -14.5,-8.623 -14.5,-16.741c0,-8.018 6.647,-14.544 14.5,-16.359V158.279zM184.41,109.896c-2.389,0.274 -5.127,0.921 -7.168,1.615V92.953c0,-42.983 34.968,-77.952 77.951,-77.952c42.983,0 77.951,34.969 77.951,77.952v18.043c-2.18,-0.663 -4.441,-1.101 -6.762,-1.307c0,-7.237 0.063,-5.841 -23.612,-31.294c-4.354,-4.678 -11.556,-5.658 -17.037,-2.077c-26.13,17.069 -58.005,25.644 -87.415,23.532C191.867,99.367 185.991,103.616 184.41,109.896zM199.008,164.184v-46.792v-2.465c32.375,1.896 66.318,-7.722 93.739,-25.283c10.858,11.658 16.738,17.773 18.634,20.099c0,5.884 0,47.705 0,54.44c0,30.447 -24.826,55.276 -55.277,55.276C221.91,219.46 199.008,192.934 199.008,164.184zM218.623,307.259l-22.049,-44.19l21.293,-8.247l27.241,33.625C231.255,298.284 219.88,306.366 218.623,307.259zM227.228,461.702l21.709,-128.263h14.071l21.709,128.263l-28.744,31.623L227.228,461.702z"/>
</svg>