SVG Import - missing frame

e.cutino · October 17, 2024, 4:46pm

I'm in trouble dragging SVG file both in Vision and Perspective.

Dragged as SVG (below on the left), I got an image missing an element, the light grey frame around the object. If I import the same as image (below on the right), it is showing the frame (the same if I drag the SVG in Chrome or any other SVG editor)

How can I solve (Perspective priority 0, but I need the same for Vision too)?
Thx. EC

Here below the SVG file:

<svg width="229" height="66" viewBox="0 0 229 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_252_8880)">
<rect x="7.18335" y="7.5" width="211.753" height="48" rx="8" fill="white" shape-rendering="crispEdges"/>
<g clip-path="url(#clip0_252_8880)">
<path d="M35.1834 43.5001C35.1834 44.2334 35.7834 44.8334 36.5168 44.8334H41.8501C42.5834 44.8334 43.1834 44.2334 43.1834 43.5001V42.1667H35.1834V43.5001ZM39.1834 18.1667C34.0368 18.1667 29.8501 22.3534 29.8501 27.5001C29.8501 30.6734 31.4368 33.4601 33.8501 35.1534V38.1667C33.8501 38.9001 34.4501 39.5001 35.1834 39.5001H43.1834C43.9168 39.5001 44.5168 38.9001 44.5168 38.1667V35.1534C46.9301 33.4601 48.5168 30.6734 48.5168 27.5001C48.5168 22.3534 44.3301 18.1667 39.1834 18.1667ZM42.9834 32.9667L41.8501 33.7667V36.8334H36.5168V33.7667L35.3834 32.9667C33.5834 31.7134 32.5168 29.6734 32.5168 27.5001C32.5168 23.8201 35.5034 20.8334 39.1834 20.8334C42.8634 20.8334 45.8501 23.8201 45.8501 27.5001C45.8501 29.6734 44.7834 31.7134 42.9834 32.9667Z" fill="#27CE3D"/>
</g>
<rect x="117.937" y="18.5" width="45" height="26" rx="13" fill="#202020" stroke="#202020" stroke-width="2"/>
<circle cx="149.937" cy="31.5" r="11" fill="white"/>
<path d="M186.977 32.272C186.977 33.1307 186.841 33.92 186.569 34.64C186.297 35.3547 185.913 35.9707 185.417 36.488C184.921 37.0053 184.324 37.408 183.625 37.696C182.932 37.9787 182.164 38.12 181.321 38.12C180.478 38.12 179.71 37.9787 179.017 37.696C178.324 37.408 177.729 37.0053 177.233 36.488C176.737 35.9707 176.353 35.3547 176.081 34.64C175.809 33.92 175.673 33.1307 175.673 32.272C175.673 31.4133 175.809 30.6267 176.081 29.912C176.353 29.192 176.737 28.5733 177.233 28.056C177.729 27.5333 178.324 27.128 179.017 26.84C179.71 26.552 180.478 26.408 181.321 26.408C182.164 26.408 182.932 26.552 183.625 26.84C184.324 27.128 184.921 27.5333 185.417 28.056C185.913 28.5733 186.297 29.192 186.569 29.912C186.841 30.6267 186.977 31.4133 186.977 32.272ZM185.385 32.272C185.385 31.568 185.289 30.936 185.097 30.376C184.905 29.816 184.633 29.344 184.281 28.96C183.929 28.5707 183.502 28.272 183.001 28.064C182.5 27.856 181.94 27.752 181.321 27.752C180.708 27.752 180.15 27.856 179.649 28.064C179.148 28.272 178.718 28.5707 178.361 28.96C178.009 29.344 177.737 29.816 177.545 30.376C177.353 30.936 177.257 31.568 177.257 32.272C177.257 32.976 177.353 33.608 177.545 34.168C177.737 34.7227 178.009 35.1947 178.361 35.584C178.718 35.968 179.148 36.264 179.649 36.472C180.15 36.6747 180.708 36.776 181.321 36.776C181.94 36.776 182.5 36.6747 183.001 36.472C183.502 36.264 183.929 35.968 184.281 35.584C184.633 35.1947 184.905 34.7227 185.097 34.168C185.289 33.608 185.385 32.976 185.385 32.272ZM198.486 26.536V38H197.71C197.587 38 197.483 37.9787 197.398 37.936C197.318 37.8933 197.238 37.8213 197.158 37.72L190.526 29.08C190.536 29.2133 190.544 29.344 190.55 29.472C190.555 29.6 190.558 29.72 190.558 29.832V38H189.198V26.536H189.998C190.067 26.536 190.126 26.5413 190.174 26.552C190.222 26.5573 190.264 26.5707 190.302 26.592C190.339 26.608 190.376 26.6347 190.414 26.672C190.451 26.704 190.491 26.7467 190.534 26.8L197.166 35.432C197.155 35.2933 197.144 35.16 197.134 35.032C197.128 34.8987 197.126 34.7733 197.126 34.656V26.536H198.486Z" fill="black"/>
</g>
<defs>
<filter id="filter0_d_252_8880" x="0.21335" y="0.53" width="228.413" height="64.66" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="1.36" dy="1.36"/>
<feGaussianBlur stdDeviation="4.165"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_8880"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_8880" result="shape"/>
</filter>
<clipPath id="clip0_252_8880">
<rect width="32" height="32" fill="white" transform="translate(23.1833 15.5)"/>
</clipPath>
</defs>
</svg>

lrose · October 17, 2024, 4:58pm

Is this embedded as an SVG in perspective?

If so you often have to structure the defs differently to have them take effect properly.

e.cutino · October 17, 2024, 9:47pm

Yes, it is embedded. Indeed it should appear as in Chrome/editor without any manipulation. Also if imported as raster in Ignition (both Vision and Perspective) it is ok

lrose · October 21, 2024, 1:30pm

Sorry it took me a bit to get back to this, had a couple days vacation.

The problem here is that what ever software you used to design the SVG, has set the type of the feColorMatrix element to matrix. Which is correct, except that Ignition has reserved the type keyword to indicate the type of the element. So the designer confuses an element attribute with an element type (that doesn't exist), this makes the filter not render. It also makes it impossible to use a non-default feColorMatrix type. Fortunately for you, the default type for an feColorMatrix element, is matrix.

To correct this you can either:
1. Use this corrected SVG, where I have removed the "type" attribute from the feColorMatrix elements.

<svg width="229" height="66" viewBox="0 0 229 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_252_8880)">
<rect x="7.18335" y="7.5" width="211.753" height="48" rx="8" fill="white" shape-rendering="crispEdges"/>
<g clip-path="url(#clip0_252_8880)">
<path d="M35.1834 43.5001C35.1834 44.2334 35.7834 44.8334 36.5168 44.8334H41.8501C42.5834 44.8334 43.1834 44.2334 43.1834 43.5001V42.1667H35.1834V43.5001ZM39.1834 18.1667C34.0368 18.1667 29.8501 22.3534 29.8501 27.5001C29.8501 30.6734 31.4368 33.4601 33.8501 35.1534V38.1667C33.8501 38.9001 34.4501 39.5001 35.1834 39.5001H43.1834C43.9168 39.5001 44.5168 38.9001 44.5168 38.1667V35.1534C46.9301 33.4601 48.5168 30.6734 48.5168 27.5001C48.5168 22.3534 44.3301 18.1667 39.1834 18.1667ZM42.9834 32.9667L41.8501 33.7667V36.8334H36.5168V33.7667L35.3834 32.9667C33.5834 31.7134 32.5168 29.6734 32.5168 27.5001C32.5168 23.8201 35.5034 20.8334 39.1834 20.8334C42.8634 20.8334 45.8501 23.8201 45.8501 27.5001C45.8501 29.6734 44.7834 31.7134 42.9834 32.9667Z" fill="#27CE3D"/>
</g>
<rect x="117.937" y="18.5" width="45" height="26" rx="13" fill="#202020" stroke="#202020" stroke-width="2"/>
<circle cx="149.937" cy="31.5" r="11" fill="white"/>
<path d="M186.977 32.272C186.977 33.1307 186.841 33.92 186.569 34.64C186.297 35.3547 185.913 35.9707 185.417 36.488C184.921 37.0053 184.324 37.408 183.625 37.696C182.932 37.9787 182.164 38.12 181.321 38.12C180.478 38.12 179.71 37.9787 179.017 37.696C178.324 37.408 177.729 37.0053 177.233 36.488C176.737 35.9707 176.353 35.3547 176.081 34.64C175.809 33.92 175.673 33.1307 175.673 32.272C175.673 31.4133 175.809 30.6267 176.081 29.912C176.353 29.192 176.737 28.5733 177.233 28.056C177.729 27.5333 178.324 27.128 179.017 26.84C179.71 26.552 180.478 26.408 181.321 26.408C182.164 26.408 182.932 26.552 183.625 26.84C184.324 27.128 184.921 27.5333 185.417 28.056C185.913 28.5733 186.297 29.192 186.569 29.912C186.841 30.6267 186.977 31.4133 186.977 32.272ZM185.385 32.272C185.385 31.568 185.289 30.936 185.097 30.376C184.905 29.816 184.633 29.344 184.281 28.96C183.929 28.5707 183.502 28.272 183.001 28.064C182.5 27.856 181.94 27.752 181.321 27.752C180.708 27.752 180.15 27.856 179.649 28.064C179.148 28.272 178.718 28.5707 178.361 28.96C178.009 29.344 177.737 29.816 177.545 30.376C177.353 30.936 177.257 31.568 177.257 32.272C177.257 32.976 177.353 33.608 177.545 34.168C177.737 34.7227 178.009 35.1947 178.361 35.584C178.718 35.968 179.148 36.264 179.649 36.472C180.15 36.6747 180.708 36.776 181.321 36.776C181.94 36.776 182.5 36.6747 183.001 36.472C183.502 36.264 183.929 35.968 184.281 35.584C184.633 35.1947 184.905 34.7227 185.097 34.168C185.289 33.608 185.385 32.976 185.385 32.272ZM198.486 26.536V38H197.71C197.587 38 197.483 37.9787 197.398 37.936C197.318 37.8933 197.238 37.8213 197.158 37.72L190.526 29.08C190.536 29.2133 190.544 29.344 190.55 29.472C190.555 29.6 190.558 29.72 190.558 29.832V38H189.198V26.536H189.998C190.067 26.536 190.126 26.5413 190.174 26.552C190.222 26.5573 190.264 26.5707 190.302 26.592C190.339 26.608 190.376 26.6347 190.414 26.672C190.451 26.704 190.491 26.7467 190.534 26.8L197.166 35.432C197.155 35.2933 197.144 35.16 197.134 35.032C197.128 34.8987 197.126 34.7733 197.126 34.656V26.536H198.486Z" fill="black"/>
</g>
<defs>
<filter id="filter0_d_252_8880" x="0.21335" y="0.53" width="228.413" height="64.66" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="1.36" dy="1.36"/>
<feGaussianBlur stdDeviation="4.165"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_8880"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_8880" result="shape"/>
</filter>
<clipPath id="clip0_252_8880">
<rect width="32" height="32" fill="white" transform="translate(23.1833 15.5)"/>
</clipPath>
</defs>
</svg>

Change the element type after embedding, from matrix to feColorMatrix
Don't use an SVG filter, rather use a CSS style filter to apply the drop shadow. Something like: filter: drop-Shadow(#c3c3c3 1px 1px 3px) is comparable.

Full disclosure, this clash between the element type and the "type" attribute is a known bug.

Perhaps @mperkins can provide more information on the progress of getting this fixed in 8.3?

e.cutino · October 21, 2024, 2:24pm

Hi Louise, it works in Perspective. Many thanks !

Indeed:
a) I just removed the “type” keyword from “feColorMatrix” lines (2) int the SVG file. That dragged as “embedded” in Perspective it works.
b) The same file dragged in a Vision Window does not work. Why? How can I fix in Vision as well?
c) Not clear to me (sorry!) what you mean at your points 2 and 3. Could you explain step-by step how?
d) Thanks also for the clear disclosure about being a bug. Is there a date/version where fixed? I need in the next months to import hundreds of SVG object and avoiding any manipulation would be greatly beneficial !

Thanks again

lrose · October 21, 2024, 3:04pm

Sure.

For the second one, once you have embedded the SVG in the properties panel you will be able to expand the elements, just as you would for any perspective component. In your case you will need to drill down until you find the feColorMatrix elements. Then you can change the type property from matrix to feColorMatrix. This is a manual operation, so if you're going to have hundreds of these, probably not the best solution.

For number 3, you would remove the SVG filter from SVG, it isn't needed in this case, then you would add a CSS style (preferably in the stylesheet resource), to apply a filter.

Here is your original SVG with the corrections for the type:

Here is the same SVG with all of the SVG filter stripped out and a CSS filter applied:

To do this:

Create a new style class, this is just a place holder make no changes to it, we only need it so that the class is easily selectable in the designer. I called mine dropShadow
In the Stylesheet resource use the following CSS:

.psc-dropShadow{
    filter: drop-shadow(#c3c3c3 1px 1px 3px)
}

In the designer select the SVG component, under the 'style' property, select the dropShadow class to apply the style to the component.

Here is the stripped down SVG:

<svg width="229" height="66" viewBox="0 0 229 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="7.18335" y="7.5" width="211.753" height="48" rx="8" fill="white" shape-rendering="crispEdges"/>
<g clip-path="url(#clip0_252_8880)">
<path d="M35.1834 43.5001C35.1834 44.2334 35.7834 44.8334 36.5168 44.8334H41.8501C42.5834 44.8334 43.1834 44.2334 43.1834 43.5001V42.1667H35.1834V43.5001ZM39.1834 18.1667C34.0368 18.1667 29.8501 22.3534 29.8501 27.5001C29.8501 30.6734 31.4368 33.4601 33.8501 35.1534V38.1667C33.8501 38.9001 34.4501 39.5001 35.1834 39.5001H43.1834C43.9168 39.5001 44.5168 38.9001 44.5168 38.1667V35.1534C46.9301 33.4601 48.5168 30.6734 48.5168 27.5001C48.5168 22.3534 44.3301 18.1667 39.1834 18.1667ZM42.9834 32.9667L41.8501 33.7667V36.8334H36.5168V33.7667L35.3834 32.9667C33.5834 31.7134 32.5168 29.6734 32.5168 27.5001C32.5168 23.8201 35.5034 20.8334 39.1834 20.8334C42.8634 20.8334 45.8501 23.8201 45.8501 27.5001C45.8501 29.6734 44.7834 31.7134 42.9834 32.9667Z" fill="#27CE3D"/>
</g>
<rect x="117.937" y="18.5" width="45" height="26" rx="13" fill="#202020" stroke="#202020" stroke-width="2"/>
<circle cx="149.937" cy="31.5" r="11" fill="white"/>
<path d="M186.977 32.272C186.977 33.1307 186.841 33.92 186.569 34.64C186.297 35.3547 185.913 35.9707 185.417 36.488C184.921 37.0053 184.324 37.408 183.625 37.696C182.932 37.9787 182.164 38.12 181.321 38.12C180.478 38.12 179.71 37.9787 179.017 37.696C178.324 37.408 177.729 37.0053 177.233 36.488C176.737 35.9707 176.353 35.3547 176.081 34.64C175.809 33.92 175.673 33.1307 175.673 32.272C175.673 31.4133 175.809 30.6267 176.081 29.912C176.353 29.192 176.737 28.5733 177.233 28.056C177.729 27.5333 178.324 27.128 179.017 26.84C179.71 26.552 180.478 26.408 181.321 26.408C182.164 26.408 182.932 26.552 183.625 26.84C184.324 27.128 184.921 27.5333 185.417 28.056C185.913 28.5733 186.297 29.192 186.569 29.912C186.841 30.6267 186.977 31.4133 186.977 32.272ZM185.385 32.272C185.385 31.568 185.289 30.936 185.097 30.376C184.905 29.816 184.633 29.344 184.281 28.96C183.929 28.5707 183.502 28.272 183.001 28.064C182.5 27.856 181.94 27.752 181.321 27.752C180.708 27.752 180.15 27.856 179.649 28.064C179.148 28.272 178.718 28.5707 178.361 28.96C178.009 29.344 177.737 29.816 177.545 30.376C177.353 30.936 177.257 31.568 177.257 32.272C177.257 32.976 177.353 33.608 177.545 34.168C177.737 34.7227 178.009 35.1947 178.361 35.584C178.718 35.968 179.148 36.264 179.649 36.472C180.15 36.6747 180.708 36.776 181.321 36.776C181.94 36.776 182.5 36.6747 183.001 36.472C183.502 36.264 183.929 35.968 184.281 35.584C184.633 35.1947 184.905 34.7227 185.097 34.168C185.289 33.608 185.385 32.976 185.385 32.272ZM198.486 26.536V38H197.71C197.587 38 197.483 37.9787 197.398 37.936C197.318 37.8933 197.238 37.8213 197.158 37.72L190.526 29.08C190.536 29.2133 190.544 29.344 190.55 29.472C190.555 29.6 190.558 29.72 190.558 29.832V38H189.198V26.536H189.998C190.067 26.536 190.126 26.5413 190.174 26.552C190.222 26.5573 190.264 26.5707 190.302 26.592C190.339 26.608 190.376 26.6347 190.414 26.672C190.451 26.704 190.491 26.7467 190.534 26.8L197.166 35.432C197.155 35.2933 197.144 35.16 197.134 35.032C197.128 34.8987 197.126 34.7733 197.126 34.656V26.536H198.486Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_252_8880">
<rect width="32" height="32" fill="white" transform="translate(23.1833 15.5)"/>
</clipPath>
</defs>
</svg>

e.cutino · October 21, 2024, 3:54pm

If I remove the "type" attribute from the feColorMatrix elements (as you did in your first post), I see the object in Perspective as expected.

Why is needed more, as per your points 2 and 3?
How can I get the "right" object in Vision too? - removing "type" as per above is working in Perspective but not in Vision

Thx.

lrose · October 21, 2024, 4:39pm

Those are other options to achieve similar results in perspective. You only need to implement one of them.

Vision and perspective are fundamentally different technologies and as such the way they interpret and render SVGs is different, particularly when embedding them in perspective.

For this SVG to render as you expect in vision you will need to either have a vision specific file or use one of the alternate methods for perspective that I have already outlined. Vision can not do CSS styling.