CODEWITHSUNDEEP
phpcsssvg
Martyn Ball
Martyn Ball

Reputation: 4885

PHP Generated SVG as background image

I want to dynamically change the colour of an SVG depending what background colour has been chosen. This is working, but it won't work as a background image as the filename is .php

Here is my PHP code which makes my image, I haven't included all the paths:

<?php 
header('Content-type: image/svg+xml');

function adjustBridgtness($rgb, $steps) {
    //Only allow RGB value to be sent
    if (count($rgb) == 3) {
        //Negative darker, positive brighter
        $steps = max(-255, min(255, $steps));

        //New color
        $new_color = array();

        foreach($rgb as $color) {
            //$color = hexdec($color); 
            $color = max(0,min(255,$color + $steps));
            $new_color[] = $color;
        }

        return $new_color;
    }
}
//$colors[0] = array(67,189,151); //Row 1

$colors[0] = adjustBridgtness(array(67,189,151),0); //Row 1
$colors[1] = array(81,193,159); //Row 2
$colors[2] = array(95,199,165); //Row 3
$colors[3] = array(107,203,173); //Row 4
$colors[4] = array(127,211,185); //Row 5
$colors[5] = array(81,193,159); //Diagonal Lines
$colors[6] = array(127,211,185); //Verticle Line

?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="796px" height="404px" viewBox="0 0 796 404">
    <path fillRule="evenodd" d="M 349.5 153.12C 349.5 153.12 396.88 200.5 396.88 200.5 396.88 200.5 349.5 247.88 349.5 247.88 349.5 247.88 302.12 200.5 302.12 200.5 302.12 200.5 349.5 153.12 349.5 153.12Z" fill="rgb(<?=$colors[0][0]?>,<?=$colors[0][1]?>,<?=$colors[0][2]?>)"/>
    <path fillRule="evenodd" d="M 251.5 153.12C 251.5 153.12 298.88 200.5 298.88 200.5 298.88 200.5 251.5 247.88 251.5 247.88 251.5 247.88 204.12 200.5 204.12 200.5 204.12 200.5 251.5 153.12 251.5 153.12Z" fill="rgb(<?=$colors[0][0]?>,<?=$colors[0][1]?>,<?=$colors[0][2]?>)"/>
</svg>

Im simply putting it in the background-image property like so:

background-image:url(images/image.php);

This isn't working though as its not displaying, what have I done wrong?

P.S. Only the administrator of the website can change the background colour, would it be better to generate the SVG and overwrite an existing file such as background.svg when the colour is changed instead of generating the colours each time the page is loaded?

Upvotes: 4

Views: 969

Answers (1)

Holger Will
Holger Will

Reputation: 7526

mmh, it works here...(at least for me)

<div style="width:400px;height:400px;background-image:url(http://karl.uphero.com/images/background_banner1.php)"></div>

Upvotes: 1

Related Questions