|
|
Rank: Newbie
Groups: Member
Joined: 8/8/2012
Posts: 2
|
How can I scale an SVG image when using HtmlToPdf.ConvertHtml()? The SVG image is always rendered at its original size and any attempts to set a width or height just result in scrollbars being rendered with the right and bottom of the SVG image cut-off. Sample HTML:
Code: HTML/ASPX
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div>
No height:
<object data="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml"></object>
<embed src="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" />
<br />
<br />
Height set:
<object data="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" height="70"></object>
<embed src="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" height="70" />
<br />
<br />
Width set:
<object data="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" width="70"></object>
<embed src="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" width="70" />
<br />
<br />
Height and Width set:
<object data="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" height="70" width="70"></object>
<embed src="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" height="70" width="70" />
<br />
<br />
Container Height and width set:
<div style="width: 70px; height: 70px;">
<object data="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml"></object>
</div>
<div style="width: 70px; height: 70px;">
<embed src="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg" type="image/svg+xml" />
</div>
</div>
</body>
</html>
Screenshot of PDF result: 
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Thanks for posting in the forum. We are looking into this and will get back to you as soon as possible.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi, We were investing this issue and noticed that the image was not rendered correctly either (as you can see you only get black images). We have posted a new build that fixed that issue. Please see your private message for the download location of the new build. Once you have the new build, you can use img tag to scale svg file. For example:
Code: HTML/ASPX
<img src="https://upload.wikimedia.org/wikipedia/en/f/fa/Google_Chrome_2011_computer_icon.svg"
width="100" height="100" />
Notice the "width" and "height" attribute on the img tag. We still do not support scaling through object/embed tag. Hope this helps. Please feel free to let us know if you have any more questions. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 8/8/2012
Posts: 2
|
Hi, I can confirm using the img tag instead of the object/embed tag results in the correct scaling. Thanks for pointing that out. FYI, with the new build, the image renders much better, but some of the image is still black. Screenshot of PDF output:  Note: I was only using the Chrome logo to test. The actual SVG images I'm using render correctly, so there's no immediate need on my part for a new build at this point but I figured I'd let you know if you want to incorporate a fix in a future build.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Great. Thank you very much for pointing out the blacks. We will investigate further and fix it as soon as possible.
Thanks!
|
|