SVG loading issues

Development
1

I am trying to load an SVG from JUCE binary data.

I have tried these method

auto svgDrawable = juce::Drawable::createFromImageData(
    BinaryData::your_file_svg, 
    BinaryData::your_file_svgSize
);

  std::unique_ptr<juce::XmlElement> svgIcon = juce::XmlDocument::parse(BinaryData::recyclebinicon_svg);
  if (svgIcon)
  {
    m_deleteButtonIcon = juce::Drawable::createFromSVG(*svgIcon);
  }

I also tried loading it using IconZip method but what ever I do the SVG doesnt appear correct on screen.

here is the svg file…

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" stroke="rgba(255,0,0,0)" stroke-width="1"/>

<mask id="path-1-inside-1_310_215" fill="white">
<rect x="1" y="2" width="8" height="6" rx="0.5"/>
</mask>
<rect x="1" y="2" width="8" height="6" rx="0.5" stroke="#9EAABE" stroke-width="2" mask="url(#path-1-inside-1_310_215)"/>
<mask id="path-2-inside-2_310_215" fill="white">
<rect x="1" y="10" width="8" height="6" rx="0.5"/>
</mask>
<rect x="1" y="10" width="8" height="6" rx="0.5" stroke="#9EAABE" stroke-width="2" mask="url(#path-2-inside-2_310_215)"/>
<mask id="path-3-inside-3_310_215" fill="white">
<rect x="11" y="2" width="8" height="6" rx="0.5"/>
</mask>
<rect x="11" y="2" width="8" height="6" rx="0.5" stroke="#9EAABE" stroke-width="2" mask="url(#path-3-inside-3_310_215)"/>
<mask id="path-4-inside-4_310_215" fill="white">
<rect x="11" y="12" width="8" height="6" rx="0.5"/>
</mask>
<rect x="11" y="12" width="8" height="6" rx="0.5" stroke="#9EAABE" stroke-width="2" mask="url(#path-4-inside-4_310_215)"/>
<line x1="0.5" y1="19" x2="19" y2="19" stroke="rgba(80,200,240,0.01)" stroke-linecap="round"/>
</svg>

image
image389×343 1.2 KB

image
image265×263 718 Bytes

The 2 screenshots above are Visual Studio Code and Gimp both rasterizing them correctly.

I have resorted to opening a new project in producer and trying to add my binary data svg to the main component and this still looked incorrect.

However this is JUCE when adding my svg drawable to the MainComponent.cpp in a basic project this is what I get..

MainComponent::MainComponent()
{
    setSize (600, 400);

    {
      m_carveIcon = juce::Drawable::createFromImageData(BinaryData::Carve_Icon_Default_svg, BinaryData::Carve_Icon_Default_svgSize);

      if (m_carveIcon)
      {
        addAndMakeVisible(m_carveIcon.get());
      }
    }
}

void MainComponent::resized()
{
    // This is called when the MainComponent is resized.
    // If you add any child components, this is where you should
    // update their positions.

    auto localBounds = getLocalBounds();


    if (m_carveIcon)
      m_carveIcon->setBounds(localBounds.getX() + 30, localBounds.getY() + 30, m_carveIcon->getWidth(), m_carveIcon->getHeight());

}

image The lines are thicker in the Juce drawable object compared to what I expect. I could start manually editing the file to see what Juce prefers but I would prefer not too.

Any ideas would be appreciated thanks.

2

Better SVG support is on the roadmap for JUCE 9, and we’re currently revamping the SVG parser so that all issues like this are addressed.

Unfortunately we’re not going to make any changes to the old SVG code until the new implementation is released. I’d not like to speculate when that would be, as there’s still a fair amount of work to go, but we’re talking several months, rather than counting weeks.

2 Likes
3

Current JUCE SVG is not very good at masks and shadows. I would suggest using plain stroke/fill if possible (or using Boolean Groups if you need something else).

1 Like