How to add a vector image as a video watermark

Design & UX
1

The web video script that I’m modifying adds a watermark to uploaded videos. I’m trying to find a solution where the watermark image doesn’t look blurry in the ‘full screen’ mode.
I’ve tried to replaced the watermark.png with a watermark.svg without success, in the php code like so:

             //$watermark_image_full_path = "watermark.png";
             $watermark_image_full_path = "watermark.svg";

the php wouldn’t process the svg in this way, I believe.

Any ideas or solutions to keep the image sharp not blurry upon resizing is welcomed

2

how big is your image?

“how to keep an image sharp when it gets bigger” is usually actually a case of “I need to make a sharp image at big size, and then shrink it for smaller sizes.”

You can always lose image resolution; you can’t add more.

2 Likes
3

thanks for your reply. it is 213 x30

Any additional help with how to add a vector image as a video watermark, is appreciated

4

The proplem is that an actual watermark is a part of the image, it is effecively burnt-into the video, but video is a pixel based media, not vector like SVG. So the watermark resolution will be tied to that of the video.
The best you can do is make sure the image you use has sufficient resolution to match the videos it will be applied to.

It is possilble to overlay an SVG onto a video in the page, but that’s not a true watermark, assuming the intention is a true watermark for security, not just a decorative/branding image overlay.

5

Thanks for your reply.
After doing some research I was starting to suspect “watermark …it is effectively burnt-into the video… so the watermark resolution will be tied to that of the video”, which makes sense.

so, what is the best way to ‘make sure the image …has sufficient resolution to match the videos it will be applied to’?

6

You will need to know the maximum resolution that will be uploaded and how big the watermark will be in proportion to the screen.
Eg, if the resolution is 1080 lines and the watermark is 20% of the frame height, the image will be 216px high.
Though you may want to make the image bigger than that just to be safe and cope with higher resolutions like 4k.
Of course if the videos are a lower resolution and you view them at full-screen on a 1080 monitor, they will still look blurry, there is no getting away from that.

7

Thanks again for your reply/help.

the web video script that I’m modifying, which adds a watermark to uploaded videos, has a php file with lines of code like this:

$ffmpegCommand =''.$ffmpeg_b.' -y -i '.$video_file_full_path.' -i '.$watermark_image_full_path.' -filter_complex "scale=426:-2, overlay=10:10, " -vcodec libx264 -preset '.$pt->config->convert_speed.' -crf 26 '.$video_output_full_path_240.' 2>&1';

for 240, 360, 480, 720, 1080, 2048 and 4096

all use the

$watermark_image_full_path = "watermark.png";

would it be better to add a different watermark.png image for each size 240, 360, etc.?

8

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