Exporting to .ai/ maintaining layer structure

[JaninaB]

I am using Tilemill for further editing in print after the export. The intention is to edit in Adobe Illustrator (with the focus on maintaining the layer structure of Tilemill in the export file). When using PDF the layer structure is not maintaned as in Tilemill. Maybe in the future there could be a possibility to have an export so that the layer structure is kept?

[springmeyer]

Hi @JaninaB - ideally we can find a way to author SVG that contains the structure necessary to maintain layers in AI. The reason I think SVG is more viable is that it is easier to author than PDF and we have a nacent svg_renderer in Mapnik that is starting to support layer groups for Inkscape. Please see #1917.

So, @JaninaB - can you please take a look at the SVG I linked to here: https://github.com/mapnik/mapnik/issues/1917#issuecomment-20284408. Let me know how that opens/works in AI?

Since I do not have access to AI ideally you can help provide some simple examples of what grouped layers look like in SVG in AI.

[springmeyer]

/cc @systemed in case he has any recommendations here.

[JaninaB]

Thanks for your feedback! Unfortunately the svg from Issue #1917: SVG output layers into groups doesn´t work. It opens, but text is not displayed and no layers are grouped.

Here´s an extract of an example from a svg with grouped layers in AI, I had to delete parts, as it was too long, but I hope it contains the essential information you need:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layers" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="298px" height="596px" viewBox="0 0 298 596" enable-background="new 0 0 298 596" xml:space="preserve">
<symbol  id="Richtungspfeil" viewBox="-5.499 -6.63 12.072 11.487">

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-523.2314" y1="522.9375" x2="-523.2314" y2="512.3065" gradientTransform="matrix(1 0.001 -0.001 1 524.2803 -517.9824)">
        <stop  offset="0" style="stop-color:#610A06"/>
        <stop  offset="1" style="stop-color:#A61C2A"/>
    </linearGradient>
    <polygon fill="url(#SVGID_1_)" stroke="#FFFFFF" stroke-width="0.8504" stroke-linejoin="round" stroke-miterlimit="10" points="
        0.584,4.432 -5.074,-6.205 0.559,-3.264 6.147,-6.172     "/>
</symbol>
<g id="Wald_x5F_Relief">
    <g>
        <defs>
            <rect id="SVGID_2_" y="0.498" width="297.751" height="595.502"/>
        </defs>
        <clipPath id="SVGID_3_">
            <use xlink:href="#SVGID_2_"  overflow="visible"/>
        </clipPath>
        <g clip-path="url(#SVGID_3_)">
            <image overflow="visible" width="1241" height="423" xlink:href="C770EE5C.jpg"  transform="matrix(0.24 0 0 0.24 0 0.7378)">
            </image>
        </g>
        <g transform="matrix(1 0 0 1 0 -7.629395e-006)" clip-path="url(#SVGID_3_)">
            <image overflow="visible" width="1241" height="423" xlink:href="C770EE5D.jpg"  transform="matrix(0.24 0 0 0.24 0 102.0293)">
            </image>
        </g>
        <g clip-path="url(#SVGID_3_)">
            <image overflow="visible" width="1241" height="423" xlink:href="C770EE5B.jpg"  transform="matrix(0.24 0 0 0.24 0 203.3203)">
            </image>
        </g>
        <g clip-path="url(#SVGID_3_)">
            <image overflow="visible" width="1241" height="423" xlink:href="C770EE64.jpg"  transform="matrix(0.24 0 0 0.24 0 304.6113)">
            </image>
        </g>
        <g transform="matrix(1 0 0 1 0 -3.051758e-005)" clip-path="url(#SVGID_3_)">
            <image overflow="visible" width="1241" height="423" xlink:href="C770EE67.jpg"  transform="matrix(0.24 0 0 0.24 0 405.9033)">
            </image>
        </g>
        <g transform="matrix(1 0 0 1 0 -6.103516e-005)" clip-path="url(#SVGID_3_)">
            <image overflow="visible" width="1241" height="372" xlink:href="C770EE65.jpg"  transform="matrix(0.24 0 0 0.24 0 507.1943)">
            </image>
        </g>
    </g>
    <g display="none">
        <defs>
            <rect id="SVGID_4_" y="0.498" width="297.751" height="595.502"/>
        </defs>
        <clipPath id="SVGID_5_" display="inline">
            <use xlink:href="#SVGID_4_"  overflow="visible"/>
        </clipPath>

            <rect x="-0.24" y="0.738" display="inline" clip-path="url(#SVGID_5_)" fill="none" stroke="#000000" stroke-width="0.9598" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="298.266" height="595.507"/>
    </g>
</g>
<g id="Höhenlinien">
    <g id="voll">
        <g>
            <defs>
                <rect id="SVGID_6_" y="0.738" width="297.751" height="595.262"/>
            </defs>
            <clipPath id="SVGID_7_">
                <use xlink:href="#SVGID_6_"  overflow="visible"/>
            </clipPath>
                -14.877,617.367 -13.917,618.087 -11.278,619.527 -9.838,619.768 -8.398,619.527 

</g>
</svg>

[springmeyer]

@JaninaB - the svg example you have posted above is not usable - it is missing several closing </g> and viewing it does not work because it references missing files. Can you please post a fixed example?

As far as my sample SVG with layers that work in inkscape, which one did you actually try? Can you try this specific tile: http://springmeyer.s3.amazonaws.com/svg-tiles-mapnik/12/1174/1568.svgz

It will not have text since this renderer that does grouping for Inkscape does not yet support text. But lines and polygons should be grouped into layers - Can you check in AI? Here are the layers showing up in inkscape:

[JaninaB]

Yes, it worked! So the layers can be grouped. Only the problem with text remains then. Do you still want the svg example I tried to post before? It is too big for the comment. But I could send it via e-mail if it is still usefull for you.

[JaninaB]

here´s how it looks like in Illustrator

[JaninaB]

One more Question @springmeyer, since this works quite fine and really makes our work in the postprocessing a lot easier I was wondering when you assume the new/alternative renderer will be available to use in Tilemill?