0

This svg loads in fine in a browser (ffox, chrome, http://jsfiddle.net/9tT6T/), but inkscape and imagemagick just convert this as a white rectangle when exported as a png. How do I rasterize this svg to a 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>
2

Apparently Inkscape requires the mask to be enclosed in a group. Add <g> ... </g> inside the mask element, around the rest of its contents, and it will display and render properly in Inkscape.

ImageMagick will almost render it properly with the group in place, but it screws up the transparency (try it with a colored background rectangle instead of white). GraphicsMagic seems to completely ignore the mask, even with the group in place.

If your ultimate goal is to use ImageMagick to render these, I think you could probably just ditch the mask and use the -transparent <color> setting for convert.

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.