SVG in PHP file

[Beam]

Hello. I need to use an svg file in my php document but when I add it I get an error. Is there a way to display svg in php? I hope someone can help. Thanks!

[Barand]

It's just another chunk of HTML.

<?php

 echo "<h1>Sample SVG<?h1>
        <div style='margin-top: 50px;'>";
    
 readfile("svg/sample1.svg");
    
 echo "</div>";
?>

sample1.svg

<svg width='200' height='200' viewBox='0 0 200 200'>              
<defs>                                                                    
    <style type='text/css'>                                               
        .light { stop-color: #F7F7F7; }                                                   
        .mid   { stop-color: #777777; }                                                   
        .dark  { stop-color: #070707; }                                                   
        .grad  { fill: url(#grad1) }                                                      
        .grad2 { fill: url(#grad2) }                                                      
    </style>                                                                              
    <linearGradient id='grad1' x1='0' y1='0' x2='1' y2='1'>                               
        <stop offset='10%' class='light' />                                               
        <stop offset='90%' class='dark' />
    </linearGradient>
    <linearGradient id='grad2' x1='1' y1='1' x2='0' y2='0' >
        <stop offset='10%' class='light' />
        <stop offset='90%' class='dark' />
    </linearGradient>
    
</defs>
<rect x='0' y='0' width='200' height='200' fill='black' />
<circle cx='100' cy='100' r='80' class='grad' />
<circle cx='100' cy='135' r='40' class='grad2' />
<circle cx='100' cy='135' r='30' fill='black' />
<circle cx='100' cy='46' r='20' class='grad2' />
<circle cx='100' cy='46' r='13' fill='black' />
</svg>

 

[Beam]

Thanks so much for getting back to me so quickly! I'm pretty new to this. Can you please tell me where to paste the code? As soon as I add the svg tag to my php file it breaks.

Here is the code for the svg...

<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path> <path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>

[Barand]

I got better results when I added width and height attributes to your svg

 echo '<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open"> 
 <svg fill="currentColor" width="50" height="50" viewBox="0 0 20 20" class="w-6 h-6"> <path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path> <path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
 </button> ';