This example shows bitmap images and SVG graphics in original size and scaled down together with some CSS transformations. Some converters like PDFreactor and Antennahouse also support PDF as image format.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
Supports PDF as image format
PrinceXML  OK
Does not support PDF as image format
Antennahouse  OK
Supports PDF as image format
Weasyprint  OK
Does not support PDF as image format. Issue with SVG
PagedJS  OK
Does not support PDF as image format  OK
Supports PDF as image format
Vivliostyle  OK
Does not support PDF as image format
OK OK with issues Error Unsupported

HTML input

        <link rel="stylesheet" type="text/css" href="styles.css" />

        <img src="pic/kanguru.jpg" class="image-100"/>
        <img src="pic/kanguru.jpg" class="image-50"/>
        <img src="pic/kanguru.jpg" class="image-30"/>

        <img src="pic/sample.svg" class="image-100"/>
        <img src="pic/sample.svg" class="image-50"/>
        <img src="pic/sample.svg" class="image-30"/>

        <img src="pic/kanguru.jpg" class="image-100 rotate-45"/>
        <img src="pic/kanguru.jpg" class="image-50 rotate-90"/>
        <img src="pic/kanguru.jpg" class="image-30 rotate-135"/>
        <img src="pic/kangaroo.pdf" class="image-100 rotate-45"/>
        <img src="pic/kangaroo.pdf" class="image-50 rotate-90"/>
        <img src="pic/kangaroo.pdf" class="image-30 rotate-135"/>

        <h1>Rounded portrait</h1>
        <img src="pic/face.png" class="portrait"/>
        <img src="pic/face.png" class="portrait round-25"/>
        <img src="pic/face.png" class="portrait round-50"/>


@import url("../styles/a4.css");

img {
    display: block;
    margin-bottom: 1em;        

h1 {
    break-before: page;

.image-100 {
    width: 100%

.image-50 {
    width: 50%

.image-30 {
    width: 30%

.rotate-45 {
    transform: rotate(45deg)        

.rotate-90 {
    transform: rotate(90deg)        

.rotate-135 {
    transform: rotate(135deg)        

.portrait {
    width: 30%;
    height: auto;

.round-25 {
    border-radius: 25%;

.round-50 {
    border-radius: 50%;