SVG with Vaadin 8

Hey,

i would like to draw dynamically generated svg (as String for Example) with Vaadin 8.
I found the SvgCompoment - but it looks outdated.
Are there any options ?

You can use Embedded for SVG’s there is example of that on our documentation, see it here https://vaadin.com/docs/v8/framework/components/components-embedded.html (Section: Generic Embedded Objects)

And you probably want to use StreamResource. If you have SVG in String, you can use e.g. source = new ByteArrayInputStream(myString.getBytes()) to generate suitable stream when you overide getStream() method of the StreamResource.StreamSource interface.

And you do have file “test.svg” there in theme directory in place?

Based on the screenshot, I can say that java code part works, and framework works correctly. You have that test.svg in DOM. Thats good. So it may be just that it has been now sized invisible or something like that. You can try to set width and height in Chrome developer tools, etc. and check if it becomes visible. And then add corresponding settings to your code or theme.

You can use Embedded for SVG’s there is example of that on our documentation, see it here https://vaadin.com/docs/v8/framework/components/components-embedded.html (Section: Generic Embedded Objects)

yep - the code is displayed in the browser.
See attached png and the test.svg
37806.png
37807.svg

You need to add the XML namespace to your svg: xmlns="http://www.w3.org/2000/svg" , otherwise it won’t be recognized as SVG:

<svg xmlns="http://www.w3.org/2000/svg" height="277" width="150" viewBox="0 0 600 1110" style="background: #b5b8c5">
<rect x="0" y="13" width="303" height="273" style="fill:#004e86;stroke:#931f49 ;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0" />
<rect x="303" y="53" width="243" height="233" style="fill:#004e86;stroke:#931f49 ;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0" />
<rect x="0" y="286" width="286" height="398" style="fill:#004e86;stroke:#931f49 ;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0" />
<rect x="286" y="352" width="214" height="332" style="fill:#004e86;stroke:#931f49 ;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0" />
<rect x="0" y="684" width="408" height="426" style="fill:#004e86;stroke:#931f49 ;stroke-width:2;fill-opacity:1.0;stroke-opacity:1.0" />
</svg>

After I have added that xmlns, both Embedded and Image started to work for me.

that´s the trick Martin - thanks.
For html5 and svg-tag this is not needed.

Now I need to get the dynamic thing to work.

I wrote a class to create an InputStream from my svg string:

public class SvgStreamSource extends StreamResource {

public SvgStreamSource(String svgText) {
    super(new StreamSource() {
        @Override
        public InputStream getStream() {
            InputStream s = new BufferedInputStream( new ReaderInputStream( new StringReader(svgText)));
            return s;        
        }
    }, svgText);        
}

 @Override
 public String getMIMEType() {         
    return "image/svg+xml";
}

}

But the content is not used as svg-data. It is added to the data-Attribute. Strange !

<object data="http://localhost:8080/myUI/APP/global/0/legacy/52/<svg xmlns="http://www.w3.org/2000/svg&quot;

Yeah, you’re setting the SVG body as the file name :slight_smile: Just try super(new StreamSource() { … }, “mysvg.svg”); in the SvgStreamSource constructor.

thanks for that - need a few seconds to realize my fault :slight_smile:
works now !

public class SvgStreamSource extends StreamResource {
    
    public SvgStreamSource(String svgText) {
        super(new StreamSource() {
            @Override
            public InputStream getStream() {
                InputStream s = new BufferedInputStream( new ReaderInputStream( new StringReader(svgText)));
                return s;        
            }
        }, "mysvg.svg");        
    }

     @Override
     public String getMIMEType() {         
        return "image/svg+xml";
    }

}