Skip to content

Fix SVG element inside SVG element rendering - #746

Open
kylehowells wants to merge 7 commits into
SVGKit:3.xfrom
kylehowells:3.x
Open

kylehowells wants to merge 7 commits into
SVGKit:3.xfrom
kylehowells:3.x

Conversation

@kylehowells

Copy link
Copy Markdown

While working on a new app I need to render arbitrary SVG elements from a web service and found a problem with a large number of the SVG elements returned to my app.

Investigating I found the problem SVGs where one's which were nested.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8 8" shape-rendering="crispEdges">
    <g transform="translate(0, 0) scale(1,1)">
      <rect fill="#003f37" x="0" y="0" width="1" height="1"/>
      <rect fill="#871b43" x="1" y="0" width="1" height="1"/>
      <rect fill="#6d1b46" x="2" y="0" width="1" height="1"/>
     <!-- Continues to make an 8x8 grid of squares....... -->
    </g>
  </svg>
</svg>

Web browsers would render the SVG file full size whereas SVGKit was rendering it as a 8 pixel block in the top right corner of an empty 1000px square.

I believe the change I have made:

  • To make the view port of a nested SVG element to be that view box of the parent SVG element

Fixes the issue while maintaining the internal and existing behaviour for other elements.

I have:

  • Added a new test case file for this problem which I have written;
  • Checked the existing test cases are not effected in their rendering.

Several other changes have been made to the project, but can be extracted out as a separate PR if desired:

  • Updated the demo project to build and run on the latest Xcode
  • Updated the XIB files to the modern XIB format used by Xcode (safe encoding of class names primarily).

@kylehowells

Copy link
Copy Markdown
Author

Most of the noise of this PR comes from: opening the XIB files in the latest Xcode version and being prompted to convert them to the latest XIB format; and adding the new example file to the Demo project.

The actual behaviour change is just the change in Source/DOM classes/SVG-DOM/SVGHelperUtilities.m.

Before

SVGRect frameViewBox = svgSVGElement.viewBox; // the ACTUAL viewbox (may be Uninitalized if none specified in SVG file)
SVGRect frameActualViewport = svgSVGElement.viewport; // the ACTUAL viewport (dictated by the graphics engine; may be Uninitialized if the renderer has too little info to decide on a viewport at all!)
SVGRect frameRequestedViewport = svgSVGElement.requestedViewport; // the default viewport requested in the SVG source file (may be Uninitialized if no svg width or height params in original source file)

After

SVGRect frameViewBox = svgSVGElement.viewBox; // the ACTUAL viewbox (may be Uninitalized if none specified in SVG file)

SVGRect frameActualViewport;

if ([transformableOrSVGSVGElement isKindOfClass:[SVGSVGElement class]] && [svgSVGElement.parentNode isKindOfClass:[SVGSVGElement class]]) {
  frameActualViewport = ((SVGSVGElement*)svgSVGElement.parentNode).viewBox;
 }
 else {
   frameActualViewport = svgSVGElement.viewport; // the ACTUAL viewport (dictated by the graphics engine; may be Uninitialized if the renderer has too little info to decide on a viewport at all!)
 }

SVGRect frameRequestedViewport = svgSVGElement.requestedViewport; // the default viewport requested in the SVG source file (may be Uninitialized if no svg width or height params in original source file)

@adamgit

adamgit commented Oct 11, 2022 via email

Copy link
Copy Markdown
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants