How do I edit JUCE demo to draw a specific svg file?


I am trying to edit the JUCE demo to draw a specific SVG but I get error:

jassert (isValidXmlName (tagName));

void createSVGDrawable()
    lastSVGLoadTime = Time::getCurrentTime();

    MemoryInputStream iconsFileStream (BinaryData::icons_zip, BinaryData::icons_zipSize, false);
    ZipFile icons (&iconsFileStream, false);

    // Load a random SVG file from our embedded file.
    const ScopedPointer<InputStream> svgFileStream (icons.createStreamForEntry (Random::getSystemRandom().nextInt (icons.getNumEntries())));

    if (svgFileStream != nullptr)
        svgDrawable = dynamic_cast<DrawableComposite*> (Drawable::createFromSVG(juce::XmlElement("D:/Desktop/media-playback-pause.svg")));

        if (svgDrawable != nullptr)
            // to make our icon the right size, we'll set its bounding box to the size and position that we want.
            svgDrawable->setBoundingBox (RelativeParallelogram (Point<float> (-100, -100),
                                                                Point<float> (100, -100),
                                                                Point<float> (-100, 100)));


You can’t create an XmlElement from a file path. Instead, create an XmlDocument object representing your file and then use the XmlDocument::getDocumentElement() method to get the main document node.



Sorry, what would the final code look like? I have no idea what I’m doing. If I type that in, I get an error from intellisense.


Here’s a routine I use a lot for drawing SVGs from a file path. Maybe you can hack it for your own needs.

//if using an SVG..
void CabbageLookAndFeel::drawFromSVG(Graphics& g, File svgFile, int x, int y, int newWidth, int newHeight, AffineTransform affine)
    ScopedPointer<XmlElement> svg (XmlDocument::parse(svgFile.loadFileAsString()));
    if(svg == nullptr)

    ScopedPointer<Drawable> drawable;

    if (svg != nullptr)
        drawable = Drawable::createFromSVG (*svg);
        drawable->setTransformToFit(Rectangle<float>(x, y, newWidth, newHeight), RectanglePlacement::stretchToFit);
        drawable->draw(g, 1.f, affine);


Works! Thank you. Final code below. And I think I learned that JUCE does not support feGaussianBlur

class SVGDemo  : public GraphicsDemoBase
    SVGDemo (ControllersComponent& cc)
        : GraphicsDemoBase (cc, "SVG")

    void drawDemo (Graphics& g) override
        drawFromSVG(g, (File)"D:\\Desktop\\blurred_circle_for_scope1.svg");

    void drawFromSVG(Graphics& g, File svgFile)
        ScopedPointer<XmlElement> svg(XmlDocument::parse(svgFile.loadFileAsString()));
        ScopedPointer<Drawable> drawable;

        drawable = Drawable::createFromSVG(*svg);
        drawable->draw(g, getAlpha(), getTransform());

    Time lastSVGLoadTime;
    ScopedPointer<DrawableComposite> svgDrawable;

How do you use vector file with Graphics class?