Log in / Register

Forum › How do I...?

SVG Gradient with HTML-Mode

spaff
Hello everybody!

I have some Problems using svg with gradient. If I generate a pdf from svg-content everything, also the gradient is fine. But sometimes I have to use more than one svg, but if I set setHTML(1) to use more svgs within div-tags, the gradient is black.

Is there a way to use more svgs with gradients?

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.4766" y1="5.8057" x2="277.9886" y2="394.9933">
	<stop  offset="0" style="stop-color:#FAEFCC"/>
	<stop  offset="0.0319" style="stop-color:#F9ECC6"/>
	<stop  offset="0.3074" style="stop-color:#F3D792"/>
	<stop  offset="0.5083" style="stop-color:#EEC96E"/>
	<stop  offset="0.6121" style="stop-color:#EBC260"/>
</linearGradient>
mikeday
There are problems using SVG elements directly within HTML, as this is still non-standard. Are you able to move the SVG to an external file that is referenced using the img element?
spaff
Good morning!

I wrote the svgcontent to a external file and set the path of this file as src of an img element, but it doesn't work. I wondered if it is possible to view a svg within a image element.. or did I understand something wrong?

My complete code (just a test case):
$svg = file_get_contents($filepath);
	
foreach($replace AS $key => $val) {
	$svg = str_replace('['.$key.']', utf8_encode($val), $svg);
}

file_put_contents('test.svg', $svg);
ob_start();
echo '<img src="test.svg" />';
$out = ob_get_clean();

$prince_url = "C:\\Webserver\\eclipse\\PrinceConversion\\";
$filename = str_replace('.svg', '', $_GET['file']).date('YmdHis').".pdf";

$prince = new Prince("C:\\Programme\\Prince\\Engine\\bin\\Prince.exe");
$prince->addStyleSheet($prince_url."style\\xf.css");
$prince->setHTML(1);
$prince->convert_string_to_file($out, $prince_url."output\\".$filename);

echo '<iframe width="800" height="800" src="output/'.$filename.'"></iframe>';


A short description of our plan:
I wrote a script to generate article descriptions for our specific products. Each product has a detailed PDF with some text and graphics. No Problem till yet, but the PDF has to be translated and so the graphics. We decided to create the grphics via Adobe Illustrator, save them as SVG with tags for the texts and replace the Tags with the values from Database. The sense is, that we have to create 100 graphics instead of 800 for different languages and measures..
mikeday
Using SVG from the image element should work, can you try a simple document from the command-line or through the GUI to test? For example:
<html>
<body>
<img src="test.svg"/>
<?body>
</html>

Make sure that test.svg exists in the same directory. Once that is working it will be easier to make the PHP script work.
spaff
Make sure that test.svg exists in the same directory.


Oops! The image element needs the absolute path.. :oops: 

<img src="C:\\Webserver\\eclipse\\PrinceConversion\\test.svg" />


Thank you very much, it works fine!