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

HTML input

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

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

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

        <h1>Bitmap</h1>
        <img src="kanguru.jpg" class="image-100 rotate-45"/>
        <img src="kanguru.jpg" class="image-50 rotate-90"/>
        <img src="kanguru.jpg" class="image-30 rotate-135"/>
    
        <h1>PDF</h1>
        <img src="kangaroo.pdf" class="image-100 rotate-45"/>
        <img src="kangaroo.pdf" class="image-50 rotate-90"/>
        <img src="kangaroo.pdf" class="image-30 rotate-135"/>
    </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)        
}