Using SVG image inside Container with HTML code

#1 · June 1, 2021, 7:00 pm

What is the best way to use SVG image inside Container with HTML code?

<img src = "happy.svg" alt="My Happy SVG"/>

How to set proper src to images that should work in design mode and also in runtime mode?

#2 · June 1, 2021, 8:30 pm

@asmat if your images are not very large consider including the svg code directly as HTML. It will allow you to customize the image using code. Take a look a this video tutorial:

SVG images can also be included using the VisualNEO Web Image Object exactly the same as .JPG or .PNG images.

asmat has reacted to this post.

#3 · June 1, 2021, 8:57 pm

Thank you so much luishp, I have already seen this video and also I have downloaded it.

I want to write some documentation, I will have to add some images inside it maybe SVG or PNG, due to images are a lot I need to use them with img tag.

Which way you recommend to me, that I include image and text together. please consider the attachment.

Uploaded files:

You need to login to have access to uploads.

#4 · June 1, 2021, 10:53 pm

@asmat is it possible for you to upload all the images to an online web server?
This way you can reference them in design mode and also in runtime mode as they are in the same url address:

<img src="https://remotelocation.com/img/image1.svg">

Regards.

asmat has reacted to this post.

#5 · June 2, 2021, 7:24 am

Thank you so much @luis, Yes it is possible I upload all images to the server, but I need to create and edit the pictures frequently, I have found a better solution in my case, I am going to use absolute's src during design as a temporary src when the project complete, I will replace the source to a relative src.

//temporary source
<img src="file://D:/Formula/trignometry/tri-4.svg">

//Source after complete
<img src="img/tri-4.svg">

luishp has reacted to this post.

Using SVG image inside Container with HTML code - Forum

Using SVG image inside Container with HTML code