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?


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>

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.


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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.