VOD’s watermarking feature allows the adding of simple image or text watermarks, but cannot meet more sophisticated needs such as adding text-image watermarks or applying filters to watermarks. Given this, VOD has supported Scalable Vector Graphics (SVG) watermarks, allowing you to design text and image layout as you like, draw your own images, and apply filters, gradients, and other special effects.
What is SVG
SVG is an XML-based markup language for describing two-dimensional vector graphics. It has been widely applied to web standards including CSS, DOM, and JavaScript.
VOD does not set height or width limits for SVG. It can identify the smallest rectangle that contains all the elements of an image and use it as the original dimension of an SVG watermark. In the figure below, the dotted frame is the smallest rectangle identified.
Note:
You can find on the internet different free, web-based SVG editors. Use them to draw the graphics you want and export them as XML files.
Before getting the final XML code, you can manually fine-tune your image, for example, align element attributes or change font size, and check the result in an editor.
How to Add SVG Watermarks
Step 1. Edit an SVG watermark.
1. Use an SVG editor (e.g., the simple tool Tryit Editor, or Online SVG Editor, which incorporates more advanced features) to draw your graphics. The graphics are displayed in real time as you edit. After editing, you can save the code as an HTML file, which you can open with a browser later to check the effect.
Note:
If you need to align different elements, we recommend that you make flexible use of the elements’ alignable attributes and check if the alignment is effective by changing the values of the elements, for example, placing images next to text, or reducing/increasing text length. For detailed instructions, see this SVG tutorial. An example is offered below.
Step 2. Create an SVG watermark template.
Call the CreateWatermarkTemplate API and specify parameters including the watermark coordinates and dimensions. After the creation, you get a watermark template ID.
Step 3. Add the SVG watermark to a video.
For how to start a video processing task and get the result, see Video Processing Task System.
Take the ProcessMedia API as an example. In Example2 Initiating a transcoding task, you should set WatermarkSet.N.Definition to the template ID obtained in step 2 and, as an SVG watermark is used, pass the XML code obtained in step 1 in WatermarkSet.N.SvgContent.
Example
This section uses an example to guide you through the process of adding a complex watermark that contains an image and replaceable text.
Use case
A client wants to watermark videos and has the following requirements:
The watermark consists of a brand logo and ID of the logged in account (text).
The watermark appears in the top right corner of videos. The distance between its origin and the right and top border of videos is 2% of video width and 5% of video height respectively.
The width of the watermark is 30% of video width, and the height scales proportionally.
The text is beneath the logo and aligns to right of the logo.
The font for the text is SimHei, the background in white, with Gaussian blur and shadow in black. The font size is 50 px when the brand logo is not scaled.
Step 1. Edit the SVG watermark.
Below is the XML source code for the SVG watermark:
Method 1: copy the above code to the input field of Tryit Editor, and click Run at the top. The watermark appears on the right side:
Method 2: save the code as an HTML file and open it with a browser. The watermark (white background) in figure 2 below appears.
Figure 1: Transparent Background
Figure 2: White Background
Figure 3: Black Background
Code explanation
Parameter
Description
Attribute
<svg>
Define the SVG canvas
width="1000px" height="1000px": both height and are 1000 px. Just make sure that the canvas is large enough to include all the elements of the watermark.
<filter id="filter">
Define the filter to be used
-
<feGaussianBlur>
Set the Gaussian blur filter
stdDeviation="2"
<feOffset>
Set the filter offset
dx="0" dy="3": offset the filter by 3 px down.
<image id="img_watermark">
Brand logo
xlink:href="data:image/png;base64,{Base64-encoded image data}": reference a local image.
height="185px" width="256px": set the original aspect ratio.
x="74.4%" y="0px": as the logo is above the text, set the Y-axis offset to 0 px. Keep adjusting the X-axis offset until the expected result is achieved (x="74.4%").
<text id="text_watermark_shadow">
Add a shadow to text
font-family="SimHei" font-style="Regular" font-size="50px": set font and font size.
text-anchor="end": set the end of the text as its original position for alignment.
x="100%": set text-anchor and x to pin the last character of the text to the right of the canvas so as to adjust the position of the brand logo (x attribute of <image id="img_watermark">).
style="opacity:1;": set the opacity.
fill="black": set the shadow-fill-color to black.
filter="url(#filter): apply the filter whose id is filter.
y="245px": set the Y-axis offset. The height of the brand logo is 185 px, and the font size 50 px, which is basically equivalent to the font height, so y must not be smaller than 185+50=235. After testing the value is set to 245.
<text id="text_watermark">
Text
Most of this parameter’s attributes are the same as those of <text id="text_watermark_shadow">, but it does not use a filter（without the filter attribute), and the text-fill-color is white (fill="white").
When checking the final result, you are advised to change the length of the text, for example, by replacing @Tencent with @Tencent is a kind person to see if the result still meets the requirements.
To use a different user ID, just replace the value of <text> in the SVG code.
