SVG as raw HTML

Comments

3 comments

  • Avatar
    Stephen Doyle

    Hi,
    May I ask for some more information about what you're trying to do?

    Cloudinary supports delivering original .svg files without modification (though with a content-disposition header indicating that the browser should treat it as an attachment), and we also support transformation options with SVG inputs, plus conversion to a raster format for output. We have limited support for SVG->SVG transformations, but depending on what you need to do, it may be possible.

    Regards,

    Stephen

    0
    Comment actions Permalink
  • Avatar
    Eric Norcross

    @stephen – I think what OP is asking for (or at the very least, the use-case that I have) is to have an SVG delivered as raw html code which can be inserted into the page vs having an `<img>` tag with a link to the SVG source. 

    The use-case for this would be to allow CSS to have a greater degree of control over the the SVG – for instance, a `:hover` effect which changed the `fill` property of a `<path>` element within the SVG code. See this article for further explanation.

    0
    Comment actions Permalink
  • Avatar
    Anthony Datu

    Hi Eric, 

    In the server-side code, you can easily just echo out the response content and since it is a standard SVG, it should render it as a part of the DOM structure. 

    PHP:  


    <body>
       <?php
          $url = 'https://tdatu-res.cloudinary.com/image/upload/v1632156791/samples/cloudinary-logo-vector.svg';
         $svg = file_get_contents($url);
         echo $svg;
       ?>
    </body>

    Javascript example in my CodeSandbox here.

    <html>
    <body>
    <h1>SVG TEST</h1>
    <divid="svg_container"></div>
    <script>
    var url="https://tdatu-res.cloudinary.com/image/upload/v1632156791/samples/cloudinary-logo-vector.svg";
    constdiv=document.querySelector("#svg_container");

    var xhr=newXMLHttpRequest();
    // Making our connection
    xhr.open("GET",url,true);

    // function execute after request is successful
    xhr.onreadystatechange=function(){

    if(this.readyState==4&&this.status==200){
    //console.log(this.responseText);
    div.innerHTML=this.responseText;
    }
    };

    // Sending our request
    xhr.send();

    </script>

    </body>
    </html>

     

    Let me know if the above are the solutions that you're looking for. 

    Regards, 

    Anthony

    0
    Comment actions Permalink

Please sign in to leave a comment.