SVG with rectangle that borders other paths not showing up

[JeffreyJamesAttenti]

I don't know how to determine what webfont will convert as far as SVG elements so I'm at a loss on where to find a solution to my problem.

I have an SVG that I edited by adding a rectangle with a thick stroke and transparent fill to border the other paths. The border shows in SVG editors like inkscape but not when I process it into a font file with webfont. The other paths are visible but not the border. What can I do to make this work?

Here's the svg code:

<?xml version="1.0" encoding="utf-8"?>
<svg id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect style="fill: rgb(216, 216, 216); fill-opacity: 0; stroke-width: 10; stroke: rgb(0, 0, 0);" x="55.15" y="25.395" width="403.052" height="461.886"/>
    <path d="M405.178,115.667c13.314-32.667,17.309-64-5.326-83.667L255.726,224l-16.976,23c0,0-27.627,40.011-37.28,58.667&#10;&#9;&#9;s-19.306,39.333-27.294,54c-7.01,12.871-10.438,15.221-14.322,11.548c-0.506-0.591-1.026-1.168-1.553-1.736&#10;&#9;&#9;c-0.037-0.047-0.073-0.09-0.11-0.138c-1.143-1.472-2.75-3.002-4.635-4.467C144.195,356.795,132.548,352,119.92,352&#10;&#9;&#9;C89.037,352,64,380.653,64,416s25.037,64,55.92,64c25.282,0,46.635-19.205,53.553-45.561l-0.004,0.043&#10;&#9;&#9;c0,0,13.355-41.482,32.661-71.482c19.306-30,49.596-43,49.596-43l31.954-32C287.68,288,391.863,148.334,405.178,115.667z&#10;&#9;&#9; M119.92,448c-15.418,0-27.918-14.353-27.918-32s12.5-32,27.918-32c15.419,0,27.918,14.353,27.918,32S135.339,448,119.92,448z&#10;&#9;&#9; M256,288c-8.836,0-16-7.163-16-16c0-8.836,7.164-16,16-16c8.837,0,16,7.164,16,16C272,280.837,264.837,288,256,288z"/>
    <path d="M207.28,265.255c9.18-14.114,17.671-26.43,18.304-27.346l0.143-0.208l0.15-0.203l16.976-23l0.038-0.052l0.039-0.052&#10;&#9;&#9;l2.941-3.918L111.896,32c-22.634,19.667-18.64,51-5.326,83.667C116.523,140.087,177.249,224.29,207.28,265.255z"/>
    <path d="M391.828,352c-12.628,0-24.275,4.795-33.637,12.874c-1.885,1.465-3.492,2.995-4.635,4.467&#10;&#9;&#9;c-0.037,0.048-0.072,0.091-0.109,0.138c-0.526,0.568-1.047,1.146-1.553,1.736c-3.884,3.673-7.312,1.323-14.322-11.548&#10;&#9;&#9;c-7.988-14.667-17.641-35.344-27.294-54c-1.77-3.421-4.146-7.561-6.843-12.038c-1.272,1.712-2.264,3.043-2.932,3.938l-0.688,0.924&#10;&#9;&#9;l-0.813,0.815l-28.688,28.729c10.433,6.855,24.565,18.276,35.306,34.965c19.305,30,32.66,71.482,32.66,71.482l-0.004-0.043&#10;&#9;&#9;C345.193,460.795,366.546,480,391.828,480C422.711,480,448,451.347,448,416S422.711,352,391.828,352z M391.828,448&#10;&#9;&#9;c-15.42,0-27.918-14.353-27.918-32s12.498-32,27.918-32c15.418,0,27.918,14.353,27.918,32S407.246,448,391.828,448z"/>
  </g>
</svg>

In an editor

After processing with webfont

[alampros]

Borders (or strokes) are very problematic when dealing with scaling SVGs. You should be able to get the desired outcome by converting the border to a path (or in Illustrator terms "outline stroke"). This can be done in Inkscape by selecting your border path and selecting "Path" > "Stroke to Path" from the menus:

Here's the result of your provided svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M50.15 20.395v471.89H463.2V20.395H50.15zm10 10H453.2v451.89H60.15V30.395z" color="#000" solid-color="#000000" white-space="normal"/>
  <path d="M405.18 115.67c13.314-32.667 17.31-64-5.326-83.667l-144.12 192-16.976 23s-27.627 40.01-37.28 58.667-19.306 39.333-27.294 54c-7.01 12.87-10.438 15.22-14.322 11.548-.506-.59-1.026-1.168-1.553-1.736-.038-.047-.074-.09-.11-.138-1.144-1.472-2.75-3.002-4.636-4.467-9.36-8.07-21.01-12.87-33.64-12.87-30.883 0-55.92 28.65-55.92 64s25.037 64 55.92 64c25.282 0 46.635-19.205 53.553-45.56l-.004.042s13.355-41.483 32.66-71.483 49.597-43 49.597-43l31.954-32s104.18-139.67 117.5-172.33zM119.92 448c-15.418 0-27.918-14.353-27.918-32s12.5-32 27.918-32c15.42 0 27.918 14.353 27.918 32s-12.5 32-27.92 32zM256 288c-8.836 0-16-7.163-16-16 0-8.836 7.164-16 16-16 8.837 0 16 7.164 16 16 0 8.84-7.16 16-16 16z"/>
  <path d="M207.28 265.26c9.18-14.114 17.67-26.43 18.304-27.346l.143-.208.15-.203 16.976-23 .038-.052.04-.05 2.94-3.92L111.9 32c-22.633 19.668-18.64 51-5.325 83.668 9.95 24.42 70.68 108.62 100.71 149.59zM391.83 352c-12.628 0-24.275 4.795-33.637 12.874-1.885 1.465-3.492 2.995-4.635 4.467-.037.05-.072.092-.11.14-.525.567-1.046 1.145-1.552 1.735-3.884 3.673-7.312 1.323-14.322-11.548-7.988-14.667-17.64-35.344-27.294-54-1.77-3.42-4.146-7.56-6.843-12.038-1.272 1.71-2.264 3.042-2.932 3.937l-.688.924-.813.816-28.688 28.73C280.75 334.89 294.88 346.31 305.622 363c19.305 30 32.66 71.482 32.66 71.482l-.004-.043c6.89 26.36 28.25 45.56 53.53 45.56 30.88 0 56.17-28.65 56.17-64s-25.29-64-56.17-64zm0 96c-15.42 0-27.918-14.353-27.918-32s12.498-32 27.918-32c15.418 0 27.918 14.353 27.918 32s-12.5 32-27.92 32z"/>
</svg>

Note: I also ran it thru SVGO to remove some cruft

Bonus Pro Tip: It's a common practice to keep an un-optimized "source" version of your icon (in SVG or AI format alongside the optimized version (with strokes and fonts outlined) so you can make changes more easily. Just be sure to only include the optimized ones in your Gruntfile.js.

[JeffreyJamesAttenti]

Thank you so much for taking the time to help me with my issue!