VectorDrawable in SVG konvertieren [geschlossen]

71

Ich habe die entgegengesetzten Konvertierungen (SVG zu VectorDrawable) manuell oder mithilfe von Web-Tools durchgeführt.

Aber es fällt mir schwer, das Gegenteil zu tun. Ich habe, VectorDrawableaber ich bin nicht sicher, wie ich es in SVG konvertieren soll, und ich kann keine Online-Tools finden, um es zu tun.

Hat jemand Erfahrung damit und was sind die Schritte oder Werkzeuge, um es zu tun?

Sandale
quelle
4
siehe w3schools.com/graphics/svg_path.asp , alles was Sie tun müssen, ist durch path d="..."Ihre Daten aus xml vector drawable zu ersetzen
pskink
@pskink Ich habe so etwas gemacht. Ich dachte, dass es einen besseren automatisierten Weg gibt.
Trotzdem
1
Schreiben Sie einfach ein kleines Python-Skript, das das für Sie
erledigt
1
Wenn Sie Bash-Meister sind, aber imho Python ist einfacher, da es eine gute XML-Unterstützung hat. docs.python.org/2/library/xml.html#module-xml (zum Beispiel
ElementTree
7
Das Tool unter shapeeshifter.design ermöglicht die Konvertierung von VectorDrawable in SVG mit der Möglichkeit, einzelne Ebenen / Pfade anzuzeigen. Viel Spaß :-)
Computingfreak

Antworten:

134

Schritte, denen ich folge:

android:pathData Ersetzt mit d

android:fillColor Ersetzt mit fill

android:strokeColor Ersetzt mit stroke

android:strokeWidth Ersetzt mit stroke-width

android:fillType Ersetzt mit fill-rule

Ein Pfad in VectorDrawable ohne fillColorbefindet sich fill="none"in SVG.

android:viewportHeight="24" android:viewportWidth="24"ist viewBox="0 0 24 24"in SVG.

Beispiel

Vektor zeichnbar

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <path
        android:fillColor="#ffffff"
        android:pathData="M12,3L2,12h3v8h2.5v-0.8c0-1.5,3-2.2,4.5-2.2s4.5,0.8,4.5,2.2V20H19v-8h3L12,3zM12,15.2c1.2,0-2.2-1-2.2-2.2 s1-2.2,2.2-2.2s2.2,1,2.2,2.2S13.2,15.2,12,15.2z" />
    <path android:pathData="M0,0h24v24H0V0z" />
</vector>

SVG

<svg xmlns="http://www.w3.org/2000/svg"
    width="24" 
    height="24" 
    viewBox="0 0 24 24" >

    <path 
        fill="#ffffff"
        d="M12,3L2,12h3v8h2.5v-0.8c0-1.5,3-2.2,4.5-2.2s4.5,0.8,4.5,2.2V20H19v8h3L12,3zM12,15.2c1.2,0-2.2-1-2.2-2.2 s1-2.2,2.2-2.2s2.2,1,2.2,2.2S13.2,15.2,12,15.2z" />
    <path d="M0,0h24v24H0V0z" fill="none"/>
</svg>
Kuti Gbolahan
quelle
Das war eine große Hilfe, aber Ihrer SVG fehlt das abschließende Tag, denke ich. Andernfalls scheint es nicht zu validieren oder in Illustrator zu öffnen.
Aonghus Shortt
XSLT kann helfen, diesen Job zu automatisieren. Es ist ziemlich einfach, aber ich weiß nicht, wie ich mit dem Präfix "android:" für Attribute umgehen soll. Also entferne ich alle Vorkommen von "android:" und transformiere dann den Vektor, der gezeichnet werden kann, in rohes SVG. Hier ist die XSL- Vorlage. Ich habe es auf dieser Seite versucht und es funktioniert für mich.
Oleksii K.
Was bedeutet Tönung: In Vektor zeichnbare Karte in SVG?
Andylamax
1
Farbe "FF000000" funktioniert nicht, sollte in "000000" geändert werden
Felix Cruz
1
Ein weiteres für die Liste: Das android <group> -Tag ist <g> in SVG, und wenn Sie android: translateX oder android: translateY verarbeiten möchten, müssen Sie stattdessen das Attribut transform = "translate ()" verwenden.
NickGlowsinDark
37

Das VectorDrawable- Format ist SVG ziemlich ähnlich .

Die Dokumentation des VectorDrawable- Formats finden Sie hier und die Dokumentation des SVG- Formats hier .

Ich habe gerade dieses Python-Skript geschrieben , das eine vom Vektor zeichnbare XML-Datei in eine SVG-Datei konvertiert. Es werden nicht alle vom Vektor zeichnbaren Eigenschaften abgedeckt, aber es funktioniert mit den gängigsten. Sie müssen nur Ihre XML-Dateien im Skript ablegen, und die Dateien werden konvertiert.

Hyperion
quelle
Es ist für Linux? nichts fallen lassen tut
@ IергейГрушин Ich habe das Skript unter Windows ausprobiert, aber es sollte auch unter Linux funktionieren. Sie sollten überprüfen, ob ein Fehler in der Konsole vorliegt. Vielleicht ist das XML-Modul nicht installiert? In diesem Fall sollten Sie ausführenpip install xml
Hyperion
Skript funktioniert nur in der Kommandozeile. Vielen Dank. Aber ich möchte Drag & Drop, also erstelle ich eine Desktop-Verknüpfung mit Exec=python /opt/utils/xml2svg.py %UJetzt kann ich Dateien ziehen und ihn auf der Desktop-Verknüpfung ablegen :) Außerdem habe ich zwei Dinge bearbeitet: Jetzt lösche das Skript die Quell-XML-Dateien nach der Konvertierung, der Name der SVG-Datei jetzt ohne .xmlVorerweiterung.
Zu Ihrer Information, @Hyperion, ich habe Ihr Repository gegabelt, um eine bessere Handhabung der Farben zu ermöglichen: github.com/RohanTalip/VectorDrawable2Svg
Rohan Talip
Danke für das Py-Skript!
Ingh.am