Break in path

[colinc86]

In a few instances paths have a break in them (and in this case the path seems to "double back" on itself). Here is an example SVG:

<svg style="vertical-align: -3.261ex;" xmlns="http://www.w3.org/2000/svg" width="9.153ex" height="8.281ex" role="img" focusable="false" viewBox="0 -2218.8 4045.5 3660" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style>
      svg a {
        fill: blue;
        stroke: blue
      }

      [data-mml-node="merror"]>g {
        fill: red;
        stroke: red
      }

      [data-mml-node="merror"]>rect[data-background] {
        fill: yellow;
        stroke: none
      }

      [data-frame],
      [data-line] {
        stroke-width: 70px;
        fill: none
      }

      .mjx-dashed {
        stroke-dasharray: 140
      }

      .mjx-dotted {
        stroke-linecap: round;
        stroke-dasharray: 0, 140
      }

      use[data-c] {
        stroke-width: 3px
      }
    </style>
    <path id="MJX-1-TEX-S4-E001" d="M702 589Q706 601 718 605H1061Q1076 597 1076 585Q1076 572 1061 565H742V0Q734 -14 724 -14H722H720Q708 -14 702 0V589Z"></path>
    <path id="MJX-1-TEX-S4-23B7" d="M742 -871Q740 -873 737 -876T733 -880T730 -882T724 -884T714 -885H702L222 569L180 484Q138 399 137 399Q131 404 124 412L111 425L265 736L702 -586V168L703 922Q713 935 722 935Q734 935 742 920V-871Z"></path>
    <path id="MJX-1-TEX-S4-E000" d="M722 -14H720Q708 -14 702 0V306L703 612Q713 625 722 625Q734 625 742 610V0Q734 -14 724 -14H722Z"></path>
    <path id="MJX-1-TEX-LO-2211" d="M60 948Q63 950 665 950H1267L1325 815Q1384 677 1388 669H1348L1341 683Q1320 724 1285 761Q1235 809 1174 838T1033 881T882 898T699 902H574H543H251L259 891Q722 258 724 252Q725 250 724 246Q721 243 460 -56L196 -356Q196 -357 407 -357Q459 -357 548 -357T676 -358Q812 -358 896 -353T1063 -332T1204 -283T1307 -196Q1328 -170 1348 -124H1388Q1388 -125 1381 -145T1356 -210T1325 -294L1267 -449L666 -450Q64 -450 61 -448Q55 -446 55 -439Q55 -437 57 -433L590 177Q590 178 557 222T452 366T322 544L56 909L55 924Q55 945 60 948Z"></path>
    <path id="MJX-1-TEX-I-1D456" d="M184 600Q184 624 203 642T247 661Q265 661 277 649T290 619Q290 596 270 577T226 557Q211 557 198 567T184 600ZM21 287Q21 295 30 318T54 369T98 420T158 442Q197 442 223 419T250 357Q250 340 236 301T196 196T154 83Q149 61 149 51Q149 26 166 26Q175 26 185 29T208 43T235 78T260 137Q263 149 265 151T282 153Q302 153 302 143Q302 135 293 112T268 61T223 11T161 -11Q129 -11 102 10T74 74Q74 91 79 106T122 220Q160 321 166 341T173 380Q173 404 156 404H154Q124 404 99 371T61 287Q60 286 59 284T58 281T56 279T53 278T49 278T41 278H27Q21 284 21 287Z"></path>
    <path id="MJX-1-TEX-N-3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z"></path>
    <path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path>
    <path id="MJX-1-TEX-I-1D441" d="M234 637Q231 637 226 637Q201 637 196 638T191 649Q191 676 202 682Q204 683 299 683Q376 683 387 683T401 677Q612 181 616 168L670 381Q723 592 723 606Q723 633 659 637Q635 637 635 648Q635 650 637 660Q641 676 643 679T653 683Q656 683 684 682T767 680Q817 680 843 681T873 682Q888 682 888 672Q888 650 880 642Q878 637 858 637Q787 633 769 597L620 7Q618 0 599 0Q585 0 582 2Q579 5 453 305L326 604L261 344Q196 88 196 79Q201 46 268 46H278Q284 41 284 38T282 19Q278 6 272 0H259Q228 2 151 2Q123 2 100 2T63 2T46 1Q31 1 31 10Q31 14 34 26T39 40Q41 46 62 46Q130 49 150 85Q154 91 221 362L289 634Q287 635 234 637Z"></path>
    <path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path>
  </defs>
  <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
    <g data-mml-node="math">
      <g data-mml-node="msqrt">
        <g transform="translate(1056,0)">
          <g data-mml-node="munderover">
            <g data-mml-node="mo">
              <use data-c="2211" xlink:href="#MJX-1-TEX-LO-2211"></use>
            </g>
            <g data-mml-node="TeXAtom" transform="translate(148.2,-1087.9) scale(0.707)" data-mjx-texclass="ORD">
              <g data-mml-node="mi">
                <use data-c="1D456" xlink:href="#MJX-1-TEX-I-1D456"></use>
              </g>
              <g data-mml-node="mo" transform="translate(345,0)">
                <use data-c="3D" xlink:href="#MJX-1-TEX-N-3D"></use>
              </g>
              <g data-mml-node="mn" transform="translate(1123,0)">
                <use data-c="31" xlink:href="#MJX-1-TEX-N-31"></use>
              </g>
            </g>
            <g data-mml-node="mi" transform="translate(408,1150) scale(0.707)">
              <use data-c="1D441" xlink:href="#MJX-1-TEX-I-1D441"></use>
            </g>
          </g>
          <g data-mml-node="msup" transform="translate(1610.7,0)">
            <g data-mml-node="mi">
              <use data-c="1D441" xlink:href="#MJX-1-TEX-I-1D441"></use>
            </g>
            <g data-mml-node="mn" transform="translate(975.3,289) scale(0.707)">
              <use data-c="32" xlink:href="#MJX-1-TEX-N-32"></use>
            </g>
          </g>
        </g>
        <g data-mml-node="mo" transform="translate(0,-391.2)">
          <use data-c="E001" xlink:href="#MJX-1-TEX-S4-E001" transform="translate(0,1945)"></use>
          <use data-c="23B7" xlink:href="#MJX-1-TEX-S4-23B7" transform="translate(0,-165)"></use>
          <svg width="1056" height="1361" y="670" x="0" viewBox="0 295.5 1056 1361">
            <use data-c="E000" xlink:href="#MJX-1-TEX-S4-E000" transform="scale(1,3.195)"></use>
          </svg>
        </g>
        <rect width="2989.5" height="60" x="1056" y="2098.8"></rect>
      </g>
    </g>
  </g>
</svg>

This should render the following:

But instead, SwiftDraw is rendering:

There is a vertical break in the square root symbol, and it appears as if there is an extra segment drawn with the top/horizontal portion of it.

[swhitty]

Thank you for reporting this.

I've had a quick look — the break in the line is because of the nested SVG which SwiftDraw does not support;

<svg width="1056" height="1361" y="670" x="0" viewBox="0 295.5 1056 1361">
    <use data-c="E000" xlink:href="#MJX-1-TEX-S4-E000" transform="scale(1,3.195)"></use>
</svg>

I had no idea this was possible but adding support for it may not actually be that difficult. Is this common in the SVGs you use?
(Removing the nested <svg> tag fixes it for this image.)

The thicker line at the top is actually correct rendering, If you open the SVG in an editor and zoom in you will see the thicker line. It is actually the fill on this rectangle at the bottom;

<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
    ...
    <rect width="2989.5" height="60" x="1056" y="2098.8"></rect>
</g>

[colinc86]

Yeah, it's pretty common. It also happens when rendering parentheses where the inner content is tall like the sum in the example. I can post another SVG example if it's helpful.

For reference, I maintain LaTeXSwiftUI. The LaTeX -> SVG rendering happens through MathJax, and they make use of the nested <svg> tags. I'm in the process of switching over to your package for the SVG -> UIImage/NSImage rendering engine.

Thank you for pointing out the thicker line at the top in the correct rendering - I probably should have put my glasses on for that one 😅

Also, thank you for taking the time to review these tickets and respond!!

[swhitty]

The main branch now has support for nested SVGs. The image referenced above now renders like this (when using PDF)

it will be included in the next release. Please let me know if it works for you.

[colinc86]

It works 👍 I tested a few other scenarios, and they all look good. Thank you!

[swhitty]

Great, its available in today's 0.19.0 release

[swhitty]

You may be interested in today's 0.20.1 release which finally includes native SwiftUI support via SVGView.

var body: some View {
    SVGView(named: "sample.svg")
        .aspectRatio(contentMode: .fit)
        .padding()
}

For best performance, pass an SVG instance — these are basically an array of CoreGraphics commands that are drawn on demand for any resolution — rasterization not required.

var image: SVG

var body: some View {
    SVGView(svg: image)
}