images

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
PagedJS  OK
Does not support PDF as image format
Typeset.sh  OK
Supports PDF as image format

HTML input

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

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

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

        <h1>Bitmap</h1>
        <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"/>
    
        <h1>PDF</h1>
        <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"/>
    </body>
</html>

Stylesheet

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

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

h1 {
    page-break-before: always;
}

.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%;
}