web-dev-qa-db-fra.com

Conversion du fichier SVG en Android Vector Drawable XML tout en maintenant la structure du groupe en place

Je veux convertir des fichiers SVG en Android XML à dessin vectoriel. J'ai besoin de la structure du SVG. Dans la mesure où le SVG regroupe plusieurs éléments ensemble, j'ai besoin que ce regroupement soit également reflété dans le Android Vector Drawable.

Malheureusement, les outils que j'ai trouvés pour faire des conversions SVG en Vector Drawable essaient de minimiser la taille du fichier d'une manière qui se débarrasse du regroupement existant dans la structure du fichier.

Existe-t-il un moyen intelligent de faire la conversion qui laisse l'arbre de regroupement intact?

androidsvgdata-conversionandroid-vectordrawable
11
Christian

Avez-vous essayé Shape Shifter ? Il est conçu comme un programme pour vous permettre d'animer facilement des vecteurs et des svgs, mais vous pouvez importer votre .svg et l'exporter vers un Vector Drawable immédiatement. Il devrait également conserver la structure de votre groupe (mais je ne fais aucune promesse car je ne l'ai pas fait explicitement moi-même).

21
swerly

Mise à jour 2019: il n'est pas nécessaire d'utiliser un outil externe ou Heck comme indiqué par les réponses plus anciennes. Android Asset Studio de Studio permet de convertir SVG/PSD en vecteurs

  • Faites un clic droit sur le dossier de l'application-> Nouvel élément vectoriel
  • Sélectionnez la deuxième option dans le bouton radio pour créer un vecteur à partir du fichier local comme indiqué dans l'image ci-dessous.
  • Cliquez sur l'icône du dossier pour charger le fichier SVG local et il le convertira automatiquement en vecteur:

enter image description here

12
Hitesh Sahu

Créez un fichier xml vierge. écrire tous les attributs d'un VectorDrawable à l'exception des pathdata. Ouvrez le fichier SVG dans Wordpad. Copiez les données de chemin d'accès, puis collez-les dans le fichier xml que vous avez créé.

Exemple SVG:

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -174 1280 870">
  <g transform="matrix(1 0 0 -1 0 696)">
   <path fill="currentColor"
d="M540 97.4004l-39 21q-47 30 -77 84q-35 62 -34 129q2.10449 95.0107 62 163q74 84 184.5 84t179.7 -86.4004q59.7998 -73.5996 61.2002 -151.199q1.59961 -88.4004 -44.4004 -153.601q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002q18.2002 -2 37.2002 -2.40039
q78 0.400391 157 0.400391l-12 27q-3 4 -23.7998 -5.7998z" />
  </g>

</svg>

Exemple de fichier xml avec les mêmes données de chemin:

<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:width="1280dp"
        Android:height="870dp"
        Android:viewportWidth="1280.0"
        Android:viewportHeight="870.0">

    <path
        Android:pathData="

        M540 97.4004l-39 21
        q-47 30 -77 84
        q-35 62 -34 129
        q2.10449 95.0107 62 163
        q74 84 184.5 84 t179.7 -86.4004
        q59.7998 -73.5996 61.2002 -151.199
        q1.59961 -88.4004 -44.4004 -153.601
        q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002
        q18.2002 -2 37.2002 -2.40039 
        q78 0.400391 157 0.400391l-12 27
        q-3 4 -23.7998 -5.7998       "

        Android:strokeLineCap="round"
        Android:strokeColor="#f00f"
        Android:fillColor="#00000000"
        Android:strokeWidth="32"/>
</vector>

Remarque: "z" à la fin des données de chemin est supprimé et les lignes ont également été réorganisées manuellement par moi pour une meilleure lisibilité.

De cette façon, vous devrez convertir les SVG en xml un à la fois et manuellement.

3
Vempati Satya Suryanarayana

Allez sur http://inloop.github.io/svg2Android mettez votre fichier SVG et sa conversion en vecteur

1
Vibhu Vikram Singh