3

I am trying to create 2 SVGs that can be morphed from one another in order to use them in an Android app.

However, the requirements are rather strict: The 2 SVGs (from and to) must have the same number of instructions and the same types of nodes in the same order, i.e. if path 1 is move then line, then path 2 needs to be move then line too, otherwise it will crash the app.

Is there any tool to accomplish this?

So far I have only encountered visual tools that do not give any control on how the exported path will look like and nothing allowing two SVGs to match.

  • I'm not sure there is any specific tool for this. How complicated are the SVGs? – Cai Jun 19 '16 at 16:05
  • Also is this a built in Android function or a third party framework? Could you link to the documentation? – Cai Jun 19 '16 at 16:10
  • here is the doc on this topic : developer.android.com/reference/android/graphics/drawable/… not much to go on – Teovald Jun 19 '16 at 16:11
  • This is a built-in android feature – Teovald Jun 19 '16 at 16:11
  • The SVGs are relatively complex : here is the longest of the 2s : M4,0.992786407 C4,0.444485615 4.45303631,0 4.99703014,0 L11.0029699,0 C11.5536144,0 12,0.452362061 12,0.992786407 L12,31.0072136 C12,31.5555144 11.5469637,32 11.0029699,32 L4.99703014,32 C4.4463856,32 4,31.5476379 4,31.0072136 L4,0.992786407 L4,0.992786407 Z M20,0.992786407 C20,0.444485615 20.4530363,0 20.9970301,0 L27.0029699,0 C27.5536144,0 28,0.452362061 28,0.992786407 L28,31.0072136 C28,31.5555144 27.5469637,32 27.0029699,32 L20.9970301,32 C20.4463856,32 20,31.5476379 20,31.0072136 L20,0.992786407 L20,0.992786407 Z – Teovald Jun 19 '16 at 16:14
2

Making your own limited exporter should be pretty easy if you know how to loop each shape and vertex. Now I personally can not help you with Sketch or Affinity editor since I have neither. But this is quite trivial to do in illustrator.

On the other hand some tools like morphSVG will automatically fix these things for you. Though i do get that sometimes the exact control of having exactly the points you want is a godsend for controlling the details as you intended.

Side note: When I try this is illustrator then the codes are stable, however if you need to do hard to non-hard/smooth interpolation it wont work even here.

enter image description here

Image 1: Simple demo, click link for live in browser. Paths done with code below.

So here is a version that constantly uses C (absolute curve) between any path segment for illustrator to avoid problems with changing point types. It even uses bezier paths for straight segments. You can use this as a scaffold for developing your own.

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

Here is a demo animation done with this method, path values taken from the exported SVG that was made with my script. This is effect is particularly hard for the default exporter to achieve.

PS: it is also possible to post correct a SVG into C only spans. Its a bit more complicated but not impossible to turn a S into a C and turn a L into a C etc.

1

I don't know of any specific tool that will help you, but assuming the SVGs aren't overly complex I would just create the second by manually editing the first.

Create your first SVG and save. Duplicate the file. Open and create your second SVG by only editing existing anchor points.

As long as you aren't adding any more shapes or anchor points the number of commands in your paths should stay the same.

You can always open your SVGs in a text editor to confirm they have the same number of attributes, path commands etc.

  • That was my first impulse. However in Sketch or Affinity, even just moving one anchor point is already enough to generate an incompatible SVG. – Teovald Jun 19 '16 at 16:49
  • how is it incompatible? – Cai Jun 19 '16 at 16:50
  • @Cai its easier to interpolate if the path has equal number of identical nodes. So that vertex numbering and types are always the same. – joojaa Jun 19 '16 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.