SVG Gradient Support in R8 SR7

and just to follow up what Brian said: RH-79097, RH-81531, and RH-81532 are fixed in Rhino 8 Service Release 7 now too.

1 Like

Using the Graphic + | Food4Rhino plugin I came across a problem with displaying gradients in SVG icons in Rhino. It turned out to be the apostrophes around
#gr-1722044040 .

Both Graphic+ in the Grasshopper preview and various web browsers correctly display the gradient both when the aforementioned expression has apostrophes and does not.

When importing SVG as an icon to Rhino, the gradient is only displayed when there are no apostrophes.

From what I have seen, the more correct convention is the version with apostrophes.

It would be nice if Rhino worked similarly to web browsers when defining gradients.

System Info

Rhino 8 SR13 2024-10-15 (Rhino 8, 8.13.24289.13001, Git hash:master @ 310800db9652d56ee534033b23cd53c62b5a1322)
License type: Educational, build 2024-10-15
License details: Cloud Zoo

Windows 11 (10.0.22631 SR0.0) or greater (Physical RAM: 64GB)
.NET 7.0.11

Computer platform: LAPTOP - Plugged in [100% battery remaining]

Non-hybrid graphics configuration.
Primary display and OpenGL: NVIDIA RTX A3000 12GB Laptop GPU (NVidia) Memory: 11GB, Driver date: 6-10-2024 (M-D-Y). OpenGL Ver: 4.6.0 NVIDIA 538.78
> Integrated accelerated graphics device with 4 adapter port(s)
- Windows Main Display is laptop’s integrated screen or built-in port
Primary OpenGL: NVIDIA RTX A3000 12GB Laptop GPU (NVidia) Memory: 11GB, Driver date: 6-10-2024 (M-D-Y). OpenGL Ver: 4.6.0 NVIDIA 538.78
> Integrated accelerated graphics device with 4 adapter port(s)
- Windows Main Display is laptop’s integrated screen or built-in port

Secondary graphics devices.
Intel(R) UHD Graphics (Intel) Memory: 128MB, Driver date: 4-2-2024 (M-D-Y).
> Integrated graphics device with 4 adapter port(s)
- Secondary monitor is laptop’s integrated screen or built-in port

OpenGL Settings
Safe mode: Off
Use accelerated hardware modes: On
GPU Tessellation is: Off
Redraw scene when viewports are exposed: On
Graphics level being used: OpenGL 4.6 (primary GPU’s maximum)

Anti-alias mode: 8x
Mip Map Filtering: Linear
Anisotropic Filtering Mode: High

Vendor Name: NVIDIA Corporation
Render version: 4.6
Shading Language: 4.60 NVIDIA
Driver Date: 6-10-2024
Driver Version: 31.0.15.3878
Maximum Texture size: 32768 x 32768
Z-Buffer depth: 24 bits
Maximum Viewport size: 32768 x 32768
Total Video Memory: 11520 MB

Rhino plugins that do not ship with Rhino
C:\Program Files\Rhino 8\Plug-ins\RhinoToGrasshopper\RhinoToGrasshopper.rhp “RhinoToGrasshopper” 1.0.0.0
C:\Users\Czaja\AppData\Roaming\McNeel\Rhinoceros\packages\8.0\Synapse\0.4.0\SynapseRCP.rhp “SynapseRCP” 0.4.0.0
C:\Users\Czaja\AppData\Roaming\McNeel\Rhinoceros\packages\8.0\AntFarmIO\0.0.64-beta\AntFarmIO.rhp “AntFarmIO” 0.0.64.0
C:\Users\Czaja\AppData\Roaming\McNeel\Rhinoceros\8.0\Plug-ins\Bella (813de3fb-18eb-405f-bfcd-b0b4d3da91fb)\24.2.0.0\bella_rhino.rhp “Bella” 24.2.0.0
C:\Users\Czaja\AppData\Roaming\McNeel\Rhinoceros\packages\8.0\AntFarm\0.0.64-beta\AntFarm.rhp “AntFarm” 0.0.64.0
C:\Users\Czaja\AppData\Roaming\McNeel\Rhinoceros\8.0\Plug-ins\Crayon (39629248-4fa6-47b8-83c7-745a7efea259)\1.2.0.0\Crayon\Crayon.rhp “Crayon” 1.0.0.0
C:\Users\Czaja\source\repos\EtoDockableApp\EtoDockableApp\bin\Debug\net48\EtoDockableApp.rhp “EtoDockableApp” 1.0.0.0
C:\Users\Czaja\AppData\Roaming\McNeel\Rhinoceros\packages\8.0\SubstanceImporter\2.0.7\Substance.Win.rhp “SubstanceImporter” 2.0.7.0
C:\Program Files\Rhino 8\Plug-ins\Karamba\License\Karamba3D_LicensePlugin_Rhino8.rhp “Karamba3DLicense”

Rhino plugins that ship with Rhino
C:\Program Files\Rhino 8\Plug-ins\Commands.rhp “Commands” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\rdk.rhp “Renderer Development Kit”
C:\Program Files\Rhino 8\Plug-ins\RhinoRenderCycles.rhp “Rhino Render” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\rdk_etoui.rhp “RDK_EtoUI” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\NamedSnapshots.rhp “Snapshots”
C:\Program Files\Rhino 8\Plug-ins\MeshCommands.rhp “MeshCommands” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\IronPython\RhinoDLR_Python.rhp “IronPython” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\RhinoCycles.rhp “RhinoCycles” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\Grasshopper\GrasshopperPlugin.rhp “Grasshopper” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\Toolbars\Toolbars.rhp “Toolbars” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\Displacement.rhp “Displacement”
C:\Program Files\Rhino 8\Plug-ins\import_SVG.rhp “Import_SVG” 8.13.24289.13001
C:\Program Files\Rhino 8\Plug-ins\SectionTools.rhp “SectionTools”

Version without the apostrophes

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  x="0" y="0" width="20px" height="20px" viewBox = " 0 0 20 20"  style="enable-background:new 0 0 20 20; " preserveAspectRatio="xMinYMin meet"  xml:space="preserve" >
<g id="Default">
<circle id="be0b9329-a679-4889-8dd0-db8e7473d1bc" cx="10" cy="10" r="10"  class="cls-1722044040" fill="url(#gr-1722044040)" >  </circle>
</g>
<defs>
<style> .cls-1722044040{stroke:none; } </style>
<linearGradient id="gr-1722044040" gradientTransform="rotate(90)" gradientUnits="objectBoundingBox" >
<stop offset="0%" style="stop-color:#FF0000 ; stop-opacity:1" />
<stop offset="100%" style="stop-color:#0066FF ; stop-opacity:1" />
</linearGradient>

</defs>
</svg>
  1. fill=“url(‘#gr-1722044040’)”
    export_svg-test1


  1. fill=“url(#gr-1722044040)”
    export_svg-test1

Hey @Czaja,

Thanks for bringing this issue to my attention :slight_smile:
Looking into it, the library we used has fixed this issue Allow quoted FuncIRI · Issue #235 · RazrFalcon/resvg · GitHub, I’ve logged a ticket to see if we can update it and get this working for you.

1 Like

Hi @CallumSykes,

just wanted to post this icon exported as svg. It displays in the browser but not in the new svg editor:

ProblemIcon

Funny to see that discourse does show it in the preview. I’ve thought it may be related to the gradient but if i move the hexagon shape a bit, the new editor displays it:

MovedPosition

Is this something which is on the radar along with gradients not looking as expected once exported as svg ? (repeat and gradient direction does not match what Rhino’s display shows).

thanks,
c.

Very. Very. Weird.

It is now! I think updating resvg will fix this, but if not I will need to fix the bug in resvg.

Indeed, i’ve found that the gradient is not displayed once the hexagon is placed in the top right quarter of the 48x48 px svg space. As soon as it touches another quarter, it works. Svg print preview does show it properly but when i convert it to a bitmap using Rhino.UI.DrawingUtilities.BitmapFromSvg it fails. Does this method use resvg too ?

_
c.

Yes, anything Toolbar icon related or in the Rhino.UI.DrawingUtilities namespaces use resvg.

Hi @CallumSykes, here are 2 examples where BitmapFromSvg and the new Svg Editor fails to render the svg icon correnctly:

Example Example2

I really would appreciate if the underlying library resvg can be updated in Rhino 8 to fix these problems.

thank you,
c.

Updating resvg affects all of Rhinos svgs so it’s a big change. Any changes that aren’t simple bug fixes will be in Rhino 9 unfortunately.

The SVG you sent can likely be rendered in Rhino 8 if some of the svg syntax is changed. Seems odd that some of the rectangles are fine and some arent’t. I tried fixing by tweaking but didn’t make a lot of progress unfortunately.

Please, there have been so many toolbar related issues in Rhino 8 that i think anyhing, which is possible to be fixed now, should happen during V8 lifecycle.

I would be happy to make this change but have no idea what causes these issues too.
_
c.

1 Like

I’m fixing what I can in v8 but I don’t think updating svg rendering will be one of the fixes.

hi Callum,

I’ve been holding on updating my custom toolbars/icons in V8 because of two reasons:

  1. I also have a lot of gradients, and it has been challenging importing them in to V8 buttons correctly. I was waiting for fixes on this.
  2. I do not how to deal with the mess of macros libraries that I’m trailing as I make new buttons or duplicate and edit buttons. When @Holo pointed this out i just froze and stopped working on this migration. I’ll address that separately on its own post.

But for now, I have this question: does it make more sense that I skip trying to get it all cleaned up in V8 and move directly to V9 WIP? Would making/importing gradient artwork in V9 wip be easier?

BTW, I think besides this custom tools migration, the ongoing work in V9 looks amazing, so I’m really excited to jump in early to the WIP this time. The improvements and new tools I see on rebuild curve, fillsrf, booleans, surface fillets, fillet edge, chamfers, SubD match, etc. are massive quality of life and productivity upgrades. Keep up the great work!

G

Can you share an svg or two with gradients that do not work in Rhino 8?

1 Like

Hi @stevebaer, i’ve shared multiple in my posts above. One 100% repeatable case is when a gradient is in the upper right quarter of an 48x48 px area:

GradientFail
GradientFail.3dm (49.3 KB)

Other types of gradients fail too. For example if a gradient is repeated, it is not handled properly. Below is suposed to show a linear gradient which is repeated 2 times, seems that discourse does not show it properly too:

LinearGradientRepeatFail
LinearGradientRepeatFail.3dm (51.9 KB)

Do you need more examples, eg. radial gradients ? I see also some problems when gradient start and end points are positioned differently.

_
c.

Thanks, I saw those. I was interested to see if the ones that Gustavo has are due to the same issue.

1 Like

Hi @stevebaer, I need to review my notes and working files because I know some gradients failed, while others didn’t. However, I can’t remember which ones, or if the issue occurred during the export or import operation, where the gradients got lost. I’ll see if I can find it tomorrow.

G

Thanks and feel free to send us a pile if that’s easier. We can do the work to find some that don’t work.

1 Like