невозможно растеризовать SVG с маской

Question

Этот svg прекрасно загружается в браузере (ffox, chrome, http://jsfiddle.net/9tT6T/), но inkscape и imagemagick просто преобразуют это в белый прямоугольник при экспорте в png. Как мне растеризовать этот SVG в PNG?

<svg width="138" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 138 40">
    <mask id="m">
        <rect width="100%" height="100%" fill="white" />
        <g transform="translate(2 30)">
            <path d="m6.12,0 5.88,0 0-2.46-.6,0-2.535-9.21-5.46,0-2.535,9.21-.6,0 0,2.46 5.13,0 0-2.46-.9,0 .24-1.2 2.025,0 .255,1.2-.9,0 0,2.46m-.435-8.235 .15,0 .615,2.985-1.38,0 .615-2.985" />
            <path d="m12.3696-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46" />
            <path d="m17.5552-5.88 .66,0 0,3.42-.66,0 0,2.46 5.28,0 0-2.46-1.17,0 0-3.42 1.17,0 0-2.46-1.17,0c0-.63 .255-.87 1.035-.87 .735,0 1.47,.075 1.47,.075v-2.355c0,0-.78-.39-2.43-.39-2.205,0-3.495,1.035-3.495,3.54h-.69v2.46" />
            <path d="m28.518,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09" />
            <path d="m41.9899-2.685c-.75,0-.93-.285-.93-.885h-3.3v2.97c0,0 1.815,.81 4.695,.81 3.21,0 4.95-1.29 4.95-3.855 0-2.58-1.935-3.375-4.26-4.125-.615-.195-.93-.3-.93-.645 0-.42 .27-.57 .93-.57 .465,0 .825,.18 .825,.75h3.15v-2.685c0,0-1.485-.96-4.38-.96-3.84,0-5.115,1.38-5.115,3.615 0,2.34 1.44,3.135 4.41,4.245 .705,.255 .87,.465 .87,.735 0,.39-.255,.6-.915,.6" />
            <path d="m47.8481-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46" />
            <path d="m58.2837,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09" />
            <path d="m66.9288-11.67-4.11,0 0,2.46 .66,0 0,6.75-.66,0 0,2.46 4.11,0 0-1.02c.375,.48 1.185,1.23 2.325,1.23 2.07,0 3.075-1.62 3.075-4.38 0-2.76-1.005-4.38-3.075-4.38-1.14,0-1.95,.75-2.325,1.23v-4.35m1.74,8.25c0,.675-.3,.96-.87,.96-.57,0-.87-.285-.87-.96v-1.5c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v1.5" />
            <path d="m83.0515-2.46c-.675,0-1.02-.33-1.02-1.11v-4.53c0-.78 .345-1.11 1.02-1.11 .675,0 1.02,.33 1.02,1.11v4.53c0,.78-.345,1.11-1.02,1.11m5.73-3.375c0-4.38-2.235-6.045-5.73-6.045-3.495,0-5.73,1.665-5.73,6.045 0,4.38 2.235,6.045 5.73,6.045 3.495,0 5.73-1.665 5.73-6.045" />
            <path d="m94.4339,0 4.77,0 0-2.46-.66,0 0-2.46c0-2.505-1.02-3.63-2.655-3.63-1.35,0-2.055,.75-2.535,1.23v-1.02h-4.11v2.46h.66v3.42h-.66v2.46h4.77v-2.46h-.66v-2.46c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v2.46h-.66v2.46" />
            <path d="m103.732-8.55c-2.775,0-4.53,1.455-4.53,4.38 0,2.925 1.755,4.38 4.53,4.38 2.385,0 3.735-.75 3.735-.75v-2.4c-.72,.24-1.86,.48-3.18,.48-1.05,0-1.425-.36-1.425-1.08v-.09h4.86v-1.08c0-1.89-.915-3.84-3.99-3.84m0,2.67c.57,0 .87,.285 .87,.96v.09h-1.74v-.09c0-.675 .3-.96 .87-.96" />
        </g>
    </mask>
    <rect width="100%" height="100%" fill="white" mask="url(#m)" />
</svg>

Answer 1

По всей видимости, Inkscape требует, чтобы маска была заключена в группу. Добавьте <g> ... </g> внутри элемента mask , вокруг остального его содержимого, и он будет правильно отображаться и отображаться в Inkscape.

ImageMagick будет почти правильно отображать его, когда группа находится на месте, но при этом прозрачность ухудшается (попробуйте использовать цветной фоновый прямоугольник вместо белого). GraphicsMagic, кажется, полностью игнорирует маску, даже с группой на месте.

Если ваша конечная цель состоит в том, чтобы использовать ImageMagick для их рендеринга, я думаю, что вы, вероятно, могли бы просто отбросить маску и использовать параметр -transparent <color> для convert .