SVG as raw HTML
I'd like to be able to use my uploaded SVG's as raw HTML so that I can adjust the colours etc. with CSS in my Nuxt project. I've tried using nuxtjs/svg but it only seems to work with static files.
Is there a way for cloudinary to return the HTML?
Thanks a lot
-
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 -
@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 -
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
Post is closed for comments.
Comments
3 comments