Question

I’d like to use SVGs as scalable background images (e.g. a rounded rectangular as background of a button). My problem is, that the button size depends on the button content – e.g. its text. Now I need a method to paint my SVG in different sizes and aspects, but with the same line-width and radius.

In my approach I used a SVG with 100% width and height

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="rect0815" x="0" y="0" width="100%" height="100%" rx="15" ry="15" 
      fill="red" stroke="#000000" stroke-width="2"/>
</svg>

and rendered it as background:

void paintEvent(QPaintEvent * pEvent)
{
    QPainter oPainter( this );
    QSvgRenderer oRenderer( QString("../share/images/background.svg") );
    oRenderer.render( &oPainter, pEvent->rect() );
}

But this gave me the same distorted result as using a fix-width SVG. Also I tried QSvgRenderer::setViewPort() without any positive effect.

Best regards,

Charly

Answer 1

The line-width request is fairly easy: add vector-effect="non-scaling-stroke" to your SVG:

<rect id="rect0815" vector-effect="non-scaling-stroke" x="0" ... />

I know of no way to prevent the radius scaling apart from recalculating it when the button is first drawn / resized and dynamically updating the SVG. But then that pretty much defeats the point of the SVG; you might as well do the calculations and paint it directly.