Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svg with radial gradient missing parameters #73

Open
cebindani opened this issue Dec 28, 2022 · 2 comments
Open

Svg with radial gradient missing parameters #73

cebindani opened this issue Dec 28, 2022 · 2 comments

Comments

@cebindani
Copy link

cebindani commented Dec 28, 2022

Original file:
card_gradient

svg code

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_9050_31492)">
<path d="M-2.26101e-07 11.0639C-1.01229e-07 8.81947 1.79212 7 4.00281 7L43.9973 7C46.208 7 48.0001 8.81948 48.0001 11.0639L48.0001 37.0695C48.0001 39.3139 46.208 41.1334 43.9973 41.1334L4.0028 41.1334C1.79212 41.1334 -1.79783e-06 39.3139 -1.67295e-06 37.0695L-2.26101e-07 11.0639Z" fill="url(#paint0_radial_9050_31492)"/>
<circle cx="40.5519" cy="14.4483" r="3.18158" fill="#FFE0F0"/>
</g>
<defs>
<radialGradient id="paint0_radial_9050_31492" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.1932 7) rotate(141.677) scale(52.507 51.373)">
<stop stop-color="#FE3386"/>
<stop offset="0.52" stop-color="#FB5594"/>
<stop offset="0.59" stop-color="#EE5799"/>
<stop offset="0.66" stop-color="#DA59A1"/>
<stop offset="0.73" stop-color="#BD5CAD"/>
<stop offset="0.81" stop-color="#9760BD"/>
<stop offset="0.88" stop-color="#6965CF"/>
<stop offset="0.96" stop-color="#106FF4"/>
<stop offset="1" stop-color="#106FF4"/>
</radialGradient>
<clipPath id="clip0_9050_31492">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>

After running following command s2v -i card_gradient.svg, exported output is missing android:centerX, android:centerY and android:gradientRadius values, as following:
image

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt" android:width="48dp" android:height="48dp"
    android:viewportWidth="48" android:viewportHeight="48">
    <group>
        <path
            android:pathData="M0 11.06C0 8.82 1.79 7 4 7L44 7C46.21 7 48 8.82 48 11.06L48 37.07C48 39.31 46.21 41.13 44 41.13L4 41.13C1.79 41.13 0 39.31 0 37.07L0 11.06Z">
            <aapt:attr name="android:fillColor">
                <gradient android:centerX="0" android:centerY="0" android:gradientRadius="1"
                    android:type="radial">
                    <item android:color="#FFFE3386" android:offset="0" />
                    <item android:color="#FFFB5594" android:offset="0.52" />
                    <item android:color="#FFEE5799" android:offset="0.59" />
                    <item android:color="#FFDA59A1" android:offset="0.66" />
                    <item android:color="#FFBD5CAD" android:offset="0.73" />
                    <item android:color="#FF9760BD" android:offset="0.81" />
                    <item android:color="#FF6965CF" android:offset="0.88" />
                    <item android:color="#FF106FF4" android:offset="0.96" />
                    <item android:color="#FF106FF4" android:offset="1" />
                </gradient>
            </aapt:attr>
        </path>
    </group>
</vector>

In Android Studio it was imported with no problems:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
    <group>
        <clip-path android:pathData="M0,0h48v48h-48z" />
        <path android:pathData="M-0,11.064C-0,8.819 1.792,7 4.003,7L43.997,7C46.208,7 48,8.819 48,11.064L48,37.069C48,39.314 46.208,41.133 43.997,41.133L4.003,41.133C1.792,41.133 -0,39.314 -0,37.069L-0,11.064Z">
            <aapt:attr name="android:fillColor">
                <gradient
                    android:centerX="41.193"
                    android:centerY="7"
                    android:gradientRadius="52.507"
                    android:type="radial">
                    <item
                        android:color="#FFFE3386"
                        android:offset="0" />
                    <item
                        android:color="#FFFB5594"
                        android:offset="0.52" />
                    <item
                        android:color="#FFEE5799"
                        android:offset="0.59" />
                    <item
                        android:color="#FFDA59A1"
                        android:offset="0.66" />
                    <item
                        android:color="#FFBD5CAD"
                        android:offset="0.73" />
                    <item
                        android:color="#FF9760BD"
                        android:offset="0.81" />
                    <item
                        android:color="#FF6965CF"
                        android:offset="0.88" />
                    <item
                        android:color="#FF106FF4"
                        android:offset="0.96" />
                    <item
                        android:color="#FF106FF4"
                        android:offset="1" />
                </gradient>
            </aapt:attr>
        </path>
        <path
            android:fillColor="#FFE0F0"
            android:pathData="M40.552,14.448m-3.182,0a3.182,3.182 0,1 1,6.363 0a3.182,3.182 0,1 1,-6.363 0" />
    </group>
</vector>

image

@viniciusfbb
Copy link

Also with linear gradient

@igorbastosib
Copy link

I don't know what kind of gradient I have here (my designer built this SVG), but I'm facing same issue:
ThermineLogo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants