search

cloudinary / cloudinary-vue

Cloudinary components library for Vue.js application, for image and video optimization.
https://cloudinary.com/documentation/vue_integration
99 stars 10 forks source link

Add the possibility to deliver raw svg #152

Open blaadje opened 2 years ago

blaadje commented 2 years ago

Explain your use case

I'd like to use <CldImage /> component with svg and not retrieving rendered <img /> tag but <svg />

Describe the problem you’re trying to solve

So we can control styling in css such as stroke fill etc. & use cloudinary with svg as hosting only. (no transforms)

Do you have a proposed solution?

Modify Image component api

patrick-tolosa commented 2 years ago

Hey @blaadje

You can use the https://github.com/cloudinary/cloudinary_js package to use plain javascript (Without vue), and use the results wherever you want.

The next generation of the javascript SDK will be released shortly, and can be used as well: https://github.com/cloudinary/js-url-gen

This feature is currently out of scope for the Vue SDK itself.

blaadje commented 2 years ago

Hello @patrick-tolosa , thanks for your answer ! Could you give me an example to do this ? I cannot find anything in the doc close to that :(

patrick-tolosa commented 2 years ago

The key thing to consider is the separation of concerns, the first task is to create a URL with your desired transformation

Once you created your URL, you can use it in whatever element you want. your custom image element, an SVG, a CSS background (using javascript to inject the CSS), or anything else.