Diagnose an SVG

We ran into problems with an SVG exported from OPM. This page began its life to help us diagnose the rendering problems. We now understand the problem and modify this page to describe the troubleshooting.

The screenshots below capture the visual problem. As you can see in the image on the left, the boxes surrounding the nodes were not being drawn.

Screenshot of expected.<br>

Screenshot of expected.

Screenshot of actual.<br>

Screenshot of actual.

In the item below, we pasted the problem SVG into an HTML plugin. The original export from OPM had been processed by the tools on Enrich Any SVG.

_Narrator: at the time this page was written, the diagrams below displayed the same rendering problem. The page author was able to find and fix a bug in the HTML Plugin. That plugin has since been installed on this wiki server. So now, the reader might be confused looking here and finding the expected visual features. Heraclitus reminds us that no one can step in the same river twice, for it is not the same river nor are they the same person._

A pattern language for neighborhoods. NeighborhoodDeveloping All the aspects of a neighborhood that need to function well for the neighborhood as a system to function well. NeighborhoodDevelopingSystem NeighborhoodWellbeing Set EnvironmentInput Set NeighborhoodOutput Set EnvironmentRequirementsSet NeighborhoodPlaces Set Neighborhood decision making systems NeighborhoodGovernance Set NeighborhoodGovernanceFramework NeighborhoodKnowledgeSystem Set

We were unsure if the problem with rendering was a side-effect of having enriched the SVG. So we added another HTML plugin item and pasted in the original SVG. When the original also did not render as expected, we suspected there was something about the HTML plugin that was breaking the rendering. The source SVG was here: svg

A pattern language for neighborhoods. NeighborhoodDeveloping All the aspects of a neighborhood that need to function well for the neighborhood as a system to function well. NeighborhoodDevelopingSystemNeighborhoodWellbeing SetEnvironmentInput SetNeighborhoodOutput SetEnvironmentRequirementsSetNeighborhoodPlaces Set Neighborhood decision making systems NeighborhoodGovernance SetNeighborhoodGovernanceFrameworkNeighborhoodKnowledgeSystem Set

The OPM SVG uses Filters which is a little exotic.

<defs> <filter height="3" width="3" y="-1" x="-1" filterUnits="objectBoundingBox" id="dropShadowv-2-1096745468"></filter> ... </defs> ... <rect filter="url(#dropShadowv-2-1096745468)" stroke="#70E483" height="60" width="135" stroke-dasharray="0" stroke-width="4" fill="#fdffff" id="v-14005"></rect>

We thought the rendering problem might also be in the browser itself. Could it be that embedding the SVG inside an HTML page would disable this slightly exotic use of filters?

To test this, we created a custom asset with the SVG embedded in an HTML page and hosted that inside a frame plugin, as below.

When the original SVG rendered correctly inside the frame, our suspicions of the HTML plugin were mostly confirmed.

//wiki.ralfbarkow.ch/assets/pages/diagnose-an-svg/diagnose-svg.html HEIGHT 400

pages/diagnose-an-svg

With our attention now firmly on the HTML plugin, our most likely suspect was the use of DOMPurify, an opensource library we use to sanitize the HTML.

Our troubleshooting turned to a different page where we ran experiments to better understand how DOMPurify was modifying the SVG. The code to understand has now been polished into a demonstration of the before-and-after applications of DOMPurify. See Hack OPM SVG.