Load SVG file on PHP server side

Question

I want to load the svg file based on a parameter.
e.g., if Parameter = A then load A.svg, if parameter = B then load B.svg, and so on..
For this case, I'm using Codeigniter, so on Model I load the svg file like this:

Model.php

$svgTag = '<div id="svg-content" >' 
          . '<input type="radio" name="test"/>'
          . file_get_contents( APPPATH. 'views/svg/'.$param.'.svg', TRUE)
          . '</div>'

After that, I load the $svgTag on view.
View.php

<html>
   <body>
      <?php echo $svgTag; ?>
   </body>
</html>

My expectation is the svg file will be loaded in the div#svg-content, but the actual result is that svg is loaded after tag <body> like this:
RESULT

<html>
   <body>
      <svg>........</svg> <!-- Loaded SVG File -->
      <div id="svg-content" >
         <input type="radio" name="test"/>
      </div>
   </body>
</html>

I wanna add the event on radio button, IF it's clicked, then change the color of SVG image.
IF I use <object> I cannot apply this style.

NOTE: This is the content of file that I try to load:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve">
    <g>
        <polygon points="358.3,524.2 328.3,524.2 328.3,665 415,665 415,640 358.3,640    "/>
    </g>
</svg>

Is there any way to get the result like this..?

<html>
   <body>
      <div id="svg-content" >
         <input type="radio" name="test"/>
         <svg>........</svg> <!-- Loaded SVG File -->
      </div>
   </body>
</html>

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

Use the <img> tag to embed it in page, this will give you full controle of placement in html

$svgTag = '<div id="svg-content" >' 
      . '<input type="radio" name="test"/>'
      . '<img src="'.APPPATH. 'views/svg/'.$param.'.svg'.'" alt="">'
      . '</div>'

Here is awesome answer on which to use <img>, <object>, or <embed> for SVG files?

edited May 23 '17 at 12:11

Community

1
1

answered Jan 15 '15 at 05:29

Saqueib

3,484
3
33
56

Yes, I already know about that tag, but I can't apply the css to the SVG because it is from out source. – Praditha Jan 15 '15 at 06:27

score 1 · Accepted Answer · answered Jan 15 '15 at 08:46

Finally I found the answer.
It should be use fread() function to load the SVG file.
So, it should be like this:

$fh = fopen(APPPATH. 'views/svg/'.$param.'.svg', 'r');
$svg_file = fread($fh, 25000);
$svgTag = '<div id="svg-content" >' 
           . '<input type="radio" name="test"/>'
           . $svg_file
           . '</div>'

Load SVG file on PHP server side

2 Answers2