Adding physical drawing to web page

I need to outright draw a diagram because there are no free pictures online that have everything I need. Using HTML and CSS, what would be my best technique? Hand draw and convert to jpeg or pdf? Draw in paint, word or power point and somehow reference the item from there? I know how get a picture to show on the page using a link but I don’t know what to do if I need to physically design my own picture. (I’m working on the technical page and want to draw out a diagram of a bacteriophage with specific parts and actions labeled)

There are a couple of options here.

Yes, creating a graphics file is one way to go, perhaps the default. You would have to covert your drawing to a graphics file (scanning it?) and file types like jpg or png or something like that are common. You could upload that file to your site and reference that. You could also host the file somewhere accessible on the internet and then reference that url in your code.

Alternatively you could “draw” it using canvas or svg or something like that, basically telling the code how to draw it.

Based on what you’ve said, you probably want the first option.

2 Likes

Do I need pro to upload a file and save it to my project?

For either solution I mentioned, it should be pretty easy.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.