Создайте 2 трансформируемых SVG

Создание собственного ограниченного экспортера должно быть довольно простым, если вы знаете, как зациклить каждую фигуру и вершину. Сейчас я лично не могу вам помочь с редактором Sketch или Affinity, так как у меня нет ни того, ни другого. Но это довольно тривиально сделать в иллюстраторе.

С другой стороны, некоторые инструменты, такие как morphSVG , автоматически исправят эти проблемы. Хотя я понимаю, что иногда точный контроль наличия именно тех точек, которые вы хотите, является находкой для контроля деталей, как вы предполагали.

Боковое примечание : когда я пытаюсь использовать иллюстратор, коды стабильны, однако, если вам нужно сделать интерполяцию от жесткой к нежесткой/гладкой, она не будет работать даже здесь.

Изображение 1 : Простая демонстрация , щелкните ссылку, чтобы перейти в браузер. Пути, сделанные с кодом ниже.

Итак, вот версия, которая постоянно использует C (абсолютную кривую) между любым сегментом пути для иллюстратора, чтобы избежать проблем с изменением типов точек. Он даже использует пути Безье для прямых сегментов. Вы можете использовать это как основу для разработки своих собственных.

// 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();
}

Вот демонстрационная анимация , сделанная с помощью этого метода, значения пути взяты из экспортированного SVG, созданного с помощью моего скрипта. Этого эффекта особенно трудно добиться экспортеру по умолчанию.

PS: также можно опубликовать правильный SVG только в промежутках C. Немного сложнее, но не невозможно превратить S в C и превратить L в C и т. д.

Я не знаю какого-либо конкретного инструмента, который вам поможет, но если предположить, что SVG не слишком сложны, я бы просто создал второй, отредактировав первый вручную.

Создайте свой первый SVG и сохраните. Дублируйте файл. Откройте и создайте второй SVG, отредактировав только существующие опорные точки.

Пока вы не добавляете больше фигур или опорных точек, количество команд в ваших путях должно оставаться прежним.

Вы всегда можете открыть свои SVG в текстовом редакторе, чтобы убедиться, что они имеют одинаковое количество атрибутов, команд пути и т. д.