Is it posible to display SVG in Qt(5.3) TextEdit without loosing quality?

? Offline

I have svg image with this attributes: viewBox="0 0 100 100"

This is basic code which I use for displaying svg:

@Image{
width: 50
height: 50
source: "test.svg"
}@

and it's not ok because image is rasterized before resizing to width and height values(50,50).

This code works perfect on all resolution:

@Image{
width: 50
height: 50
sourceSize.width: width
sourceSize.height: height
source: "test.svg"
}@

because image is drawn in exact dimensions which is needed!

Is it posible to get same functionality in a TextEdit where <img> tag is used?

< img src="test.svg" width="50" height="50" >

This code doesn't work because sourceSize can't be set... and image is rasterized before resizing and displaying...

Maybe there is some other way to accomplish this?

The main goal is displaying some text and some inline images(like smileys in chat application). I use TextEdit because it can display RichText(html in this case), and that html normaly works in IE or FF browser - the svg looks perfect. Why it's not working in Qt? Is there any other way to mix text and images?

shav

Hi,

If you don't need custom images you can user UTF-8 Emoji. All list you can find "here":http://apps.timwhitlock.info/emoji/tables/unicode. I think you can try to find some way to change the image from standard.

Also you can try to create SVG image with width and height which you need to display. In your case you need to set attribute viewBox=“0 0 50 50”. It's must help to you solve the problem. If you need to support retina icons. You can use code to check the display type (retina or non-retina) and then update image (change path to image).

In C++
@
//Subscribe to signal of activate all available screens.
foreach(QWindow* wnd, qApp->allWindows())
{
connect(wnd, SIGNAL(screenChanged(QScreen*)), SLOT(onWindowDidCahngeScreen(QScreen*)));
}

//Slot Implementation
void Manger::onWindowDidCahngeScreen(QScreen* newScreen)
{
QWindow* wnd = (QWindow*)sender();
if(wnd == qApp->focusWindow())
{
bool isRetina = (newScreen->devicePixelRatio() == 2);
emit screenDidChange(isRetina, getScreenSize()); //Send signal to QML
}
}
@

In QML:
@
property string retinaSufix: ""

Component.onCompleted: {
manager.screenDidChange.connect(function (isRetina, size) {
retinaSufix = (isRetina === true) ? "@2x" : "";
});
}

Image {
width: 50
height: 50
source: "test" + retinaSufix + ".svg"
}
@

Also you need two images first for non-retina display and second for retina display. In your case test.svg (50x50) and test@2x.svg (100x100).

I using this in my project but I use this code with PNG files and don't tested on SVG.

I hope this help you to solve your problem.

? Offline

Thank you @shav. I need to resize my custom svg images depending on screen dpi. Maybe that will be posible to achieve with a new web engine in Qt 5.4. For now it seems that's not possible...