Hi, I'm attempting to get a little tricky with dynamic content by manipulating svg images. We need to load bitmap images dynamically and transform them by adding borders and rotations through svg. The general idea is that we could load an svg file which contains a link to a bitmap image, and apply transformations and decorations to the image. By loading a different svg container we should be able to apply different themes to any given image.
To start with we created some simple test svg images which link to an external image using Adobe Illustrator or InDesign. The svg images and the bitmap image they linked to were copied to our test web server and I used PHP to feed Prince a constructed document which contained the svg images as content as img links:
...
<img src="img/container1.svg" />
<img src="img/container2.svg" />
...
This worked flawlessly and was very encouraging. The next step was to try and alter the svg images by replacing items in the svg text such as the url of the linked image, and border colours. To do this, we have to first load the svg file as text content, manipulate it, and write it out to the page as svg content rather than as a link to an external svg file:
...
$svg = file_get_contents( $svgURL );
$svg = str_replace( $oldImgRef, $newImgRef, $svg );
$svg = str_replace( $oldColour, $newColour, $svg );
print $svg;
...
Now the svg content renders, and the colours are changed as expected, but the external bitmap image is not loaded. By commenting out the str_replace commands so that no transformation is being done to the svg other than reading it in and printing it inline also fails to display the original linked image.
So I figured it must be a pathing problem, possibly because the images are in a subfolder from the page being rendered. I have tried relative urls, site absolute urls, machine absolute urls and setting Prince's baseURL to the location of the PHP contents:
$prince -> setBaseURL( 'http://localhost/test/' );
But none of these seem to work. Is it something to do with the way svg links to images using xlink:href? Here is an example of what the link looks like in the svg source:
<image overflow="visible" enable-background="new" width="443" height="293" xlink:href="test.png" transform="matrix(0.9409 0 0 0.9409 12.7158 9.6282)"></image>
and I am replacing "test.png" with "test2.png", "img/test2.png", "/test/img/test2.png" or "/Users/scott/Sites/test/img/test2.png"
Any ideas?
Thanks,
Scott
To start with we created some simple test svg images which link to an external image using Adobe Illustrator or InDesign. The svg images and the bitmap image they linked to were copied to our test web server and I used PHP to feed Prince a constructed document which contained the svg images as content as img links:
...
<img src="img/container1.svg" />
<img src="img/container2.svg" />
...
This worked flawlessly and was very encouraging. The next step was to try and alter the svg images by replacing items in the svg text such as the url of the linked image, and border colours. To do this, we have to first load the svg file as text content, manipulate it, and write it out to the page as svg content rather than as a link to an external svg file:
...
$svg = file_get_contents( $svgURL );
$svg = str_replace( $oldImgRef, $newImgRef, $svg );
$svg = str_replace( $oldColour, $newColour, $svg );
print $svg;
...
Now the svg content renders, and the colours are changed as expected, but the external bitmap image is not loaded. By commenting out the str_replace commands so that no transformation is being done to the svg other than reading it in and printing it inline also fails to display the original linked image.
So I figured it must be a pathing problem, possibly because the images are in a subfolder from the page being rendered. I have tried relative urls, site absolute urls, machine absolute urls and setting Prince's baseURL to the location of the PHP contents:
$prince -> setBaseURL( 'http://localhost/test/' );
But none of these seem to work. Is it something to do with the way svg links to images using xlink:href? Here is an example of what the link looks like in the svg source:
<image overflow="visible" enable-background="new" width="443" height="293" xlink:href="test.png" transform="matrix(0.9409 0 0 0.9409 12.7158 9.6282)"></image>
and I am replacing "test.png" with "test2.png", "img/test2.png", "/test/img/test2.png" or "/Users/scott/Sites/test/img/test2.png"
Any ideas?
Thanks,
Scott