Why the convert color result is #RRGGBBAA?

[wejoy]

For example, this one,

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="89dp"
    android:height="118dp"
    android:viewportWidth="178"
    android:viewportHeight="236">
    <path
        android:fillType="evenOdd"
        android:pathData="M177.999,0L177.999,235.999L9.999,235.999C5.993,235.999 2.537,233.644 0.941,230.242C2.747,229.651 4.055,227.911 4.055,225.858C4.055,223.462 2.274,221.494 0,221.277L0,217.761C2.274,217.545 4.055,215.576 4.055,213.18C4.055,210.784 2.274,208.816 0,208.6L0.001,205.38C2.282,205.171 4.07,203.199 4.07,200.798C4.07,198.396 2.282,196.425 0.001,196.216L0.001,192.745C2.282,192.536 4.07,190.564 4.07,188.163C4.07,185.762 2.282,183.79 0.001,183.581L0.001,180.11C2.282,179.901 4.07,177.93 4.07,175.528C4.07,173.127 2.282,171.155 0.001,170.947L0.001,167.476C2.282,167.267 4.07,165.295 4.07,162.894C4.07,160.492 2.282,158.521 0.001,158.312L0.001,154.841C2.282,154.632 4.07,152.661 4.07,150.259C4.07,147.858 2.282,145.886 0.001,145.677L0.001,142.206C2.282,141.997 4.07,140.026 4.07,137.624C4.07,135.223 2.282,133.251 0.001,133.043L0.001,129.572C2.282,129.363 4.07,127.391 4.07,124.99C4.07,122.588 2.282,120.617 0.001,120.408L0.001,116.937C2.282,116.728 4.07,114.757 4.07,112.355C4.07,109.954 2.282,107.982 0.001,107.773L0.001,104.302C2.282,104.094 4.07,102.122 4.07,99.721C4.07,97.319 2.282,95.348 0.001,95.139L0.001,90.696C2.282,90.487 4.07,88.515 4.07,86.114C4.07,83.713 2.282,81.741 0.001,81.532L0.001,78.061C2.282,77.852 4.07,75.881 4.07,73.479C4.07,71.078 2.282,69.106 0.001,68.897L0.001,65.426C2.282,65.218 4.07,63.246 4.07,60.845C4.07,58.443 2.282,56.472 0.001,56.263L0.001,52.792C2.282,52.583 4.07,50.611 4.07,48.21C4.07,45.809 2.282,43.837 0.001,43.628L0.001,40.157C2.282,39.948 4.07,37.977 4.07,35.575C4.07,33.174 2.282,31.202 0.001,30.994L0.001,27.523C2.282,27.314 4.07,25.342 4.07,22.941C4.07,20.539 2.282,18.568 0.001,18.359L0.001,14.888C2.282,14.679 4.07,12.707 4.07,10.306C4.07,8.223 2.724,6.463 0.878,5.897C2.443,2.421 5.939,0 9.999,0L177.999,0Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="132.37732"
                android:endY="224.74123"
                android:startX="46.238445"
                android:startY="10.39058"
                android:type="linear">
                <item
                    android:color="#FFF64545"
                    android:offset="0" />
                <item
                    android:color="#FFCC1D1D"
                    android:offset="1" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

The gradient colors were converted to #CC1D1DFF and #F64545FF ...

It seems have some display problem in my develop enviroument, but ok on the chrome, it that some kind of SVG version reason?

[seanghay]

This is strange. Could you help me finding the bug in the library (https://github.com/seanghay/vector-drawable-svg/blob/master/src/vector-drawable-svg.js) and make a pull request and I will merge asap? The source is quite small and simple.

[rayrhehs]

Hey, I had a look at the convertHexColor method and noticed that it takes in either a 4 digit or an 8 digit hex code value and modifies it by taking the alpha values from the front and adding them to the end.

This is why wejoy's color values went from #FFF64545 to #F64545FF or #FFCC1D1D to #CC1D1DFF. The program works as intended, but the outputted hex code may not be the same on different environments when they convert the 8 digit code into a 6 digit hex code. From what I've seen, they remove the AA values at the end of the 8 digit code. In the instance of the first color, the original unconverted value would go from FFF64545 to FFF645 (yellow) and the converted value F64545FF to F64545 (red).

I think the solution might be to change the method such that it converts the 8 digit hex code to a 6 digit one by removing the alpha values all together.

[wejoy]

Hey, I had a look at the convertHexColor method and noticed that it takes in either a 4 digit or an 8 digit hexadecimal value and modifies it by taking the alpha values from the front and adding them to the end.

This is why wejoy's color values went from #FFF64545 to #F64545FF or #FFCC1D1D to #CC1D1DFF. The program works as intended, but the outputted hex code may not be the same on different environments when they convert the 8 digit code into a 6 digit hex code. From what I've seen, they remove the AA values at the end of the 8 digit code. In the instance of the first color, the original unconverted value would go from FFF64545 to FFF645 (yellow) and the converted value F64545FF to F64545 (red).

I think the solution might be to change the method such that it converts the 8 digit hex code to a 6 digit one by removing the alpha values all together.

function convertHexColor(argb) {
	const digits = argb.replace(/^#/, '');

	if (digits.length !== 4 && digits.length !== 8) {
		return argb;
	}

	let red, green, blue, alpha;
	if (digits.length === 4) {
		alpha = digits[0];
		red = digits[1];
		green = digits[2];
		blue = digits[3];
	} else {
		alpha = digits.substr(0, 2);
		red = digits.substr(2, 2);
		green = digits.substr(4, 2);
		blue = digits.substr(6, 2);
	}
	return '#' + red + green + blue + alpha;
}

Indeed, the return string is '#' + red + green + blue + alpha;

[wejoy]

This is strange. Could you help me finding the bug in the library (https://github.com/seanghay/vector-drawable-svg/blob/master/src/vector-drawable-svg.js) and make a pull request and I will merge asap? The source is quite small and simple.

I went there from floo.app, I am not familiar with next.js, I was actually in converting my android app to harmonyos arkui platform, just find this tool to convert vector drawable back to the svg, it's a very useful tool to me, btw.

It seems Shehryar has located problem.