Erstellen Sie 2 morphbare SVGs

Das Erstellen Ihres eigenen begrenzten Exporters sollte ziemlich einfach sein, wenn Sie wissen, wie Sie jede Form und jeden Scheitelpunkt loopen. Jetzt kann ich Ihnen persönlich nicht mit Sketch oder Affinity Editor helfen, da ich beides nicht habe. Aber das ist ziemlich trivial in Illustrator.

Auf der anderen Seite beheben einige Tools wie MorphSVG diese Dinge automatisch für Sie. Obwohl ich verstehe, dass manchmal die genaue Kontrolle, genau die gewünschten Punkte zu haben, ein Geschenk des Himmels ist, um die Details so zu steuern, wie Sie es beabsichtigt haben.

Randnotiz : Wenn ich versuche, dies zu illustrieren, sind die Codes stabil, aber wenn Sie eine harte bis nicht harte/glatte Interpolation durchführen müssen, funktioniert es auch hier nicht.

Bild 1 : Einfache Demo , klicken Sie auf den Link für Live im Browser. Pfade mit dem folgenden Code erstellt.

Hier ist also eine Version, die ständig C (absolute Kurve) zwischen jedem Pfadsegment für den Illustrator verwendet, um Probleme mit dem Ändern von Punkttypen zu vermeiden. Es verwendet sogar Bezier-Pfade für gerade Segmente. Sie können dies als Gerüst für die Entwicklung Ihrer eigenen verwenden.

// jooExportSVGScaffold.jsx
// run in extendscript toolkit or put in a file with .jsx 
// extension and drag and drop on illustrator.
//
// files saves a a4 output with only curve to segments of paths so they 
// always stay the same when exported so it can easily be interpolated   
// later.

#target illustrator

main();

function ppos(point){
    return ""+point[0]+" "+-1*point[1] 
}


function handlePath(path) {
    var out = "";    
    var pnts = path.pathPoints;

    var ipos = pnts[0].anchor;

    var pos = pnts[0].rightDirection;
    var pos2, pos3;
    out="M"+ppos(ipos);
    for (var p=1; p<pnts.length; p++){
       pos2 = pnts[p].leftDirection;
       pos3 = pnts[p].anchor;
       out += "C"+ppos(pos)+" "+ppos(pos2)+" "+ppos(pos3);
       pos = pnts[p].rightDirection;
    }
    if (path.closed){
        pos2 = pnts[0].leftDirection;
        pos3 = pnts[0].anchor;
        out += "C"+ppos(pos)+" "+ppos(pos2)+" "+ppos(pos3)+"Z";
    }
    return out;
}

function main() {
    var sel = app.activeDocument.selection; 
    var file = File.saveDialog('save centers', 'SVGPath:*.svg');

    file.open('w');

    file.writeln('<?xml version="1.0" encoding="utf-8"?>');
    file.writeln('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');
    file.writeln('<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"');
    file.writeln('width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">');


    var doc = app.activeDocument;
    var paths = doc.pathItems;

    for (var i=0; i<paths.length; i++){
        data=handlePath(paths[i]);  
        file.writeln('<path fill="none" stroke="black" d="'+data+'"/>');
    }
    file.writeln('</svg>'); 
    file.close();
}

Hier ist eine Demo-Animation , die mit dieser Methode erstellt wurde, Pfadwerte aus dem exportierten SVG, das mit meinem Skript erstellt wurde. Dieser Effekt ist für den Standardexporter besonders schwer zu erreichen.

PS: Es ist auch möglich, ein SVG korrekt in nur C-Spans zu posten. Es ist etwas komplizierter, aber nicht unmöglich, ein S in ein C und ein L in ein C zu verwandeln usw.

Ich kenne kein bestimmtes Tool, das Ihnen helfen wird, aber vorausgesetzt, die SVGs sind nicht übermäßig komplex, würde ich einfach das zweite erstellen, indem ich das erste manuell bearbeite.

Erstellen Sie Ihr erstes SVG und speichern Sie es. Duplizieren Sie die Datei. Öffnen und erstellen Sie Ihr zweites SVG, indem Sie nur vorhandene Ankerpunkte bearbeiten.

Solange Sie keine weiteren Formen oder Ankerpunkte hinzufügen, sollte die Anzahl der Befehle in Ihren Pfaden gleich bleiben.

Sie können Ihre SVGs jederzeit in einem Texteditor öffnen, um zu bestätigen, dass sie die gleiche Anzahl von Attributen, Pfadbefehlen usw. haben.