Original title:SVGHave you stepped on the thunder?
With the emergence of SVG interactive layout and the increasing number of applications in H5, many friends will want to upload their own SVG graphics in Xiumili. Xiumi's homepage tutorial contains an explanation about SVG graphics: "Ximi's SVG Pictures", which mainly introduces the features of SVG graphics that are zoomed in and out without distortion and how to use Adobe Illustrator (hereinafter referred to asAi) Method to export the ".svg" file. However, there are two places in this tutorial that have not been explained:
1. How is SVG composed?
2. What are the taboos for using SVG?
SVG pictures are not simply converted by changing the suffix of any image file to ".svg". When uploading or using SVG, Xiumi's friends often encounter problems such as "this vector graphics contains unsupported content" and "too many SVG graphics cannot be synchronized". Then this article will clear the mines for you.
01
How SVG is formed
Friends who are familiar with Ai or other vector graphics production tools should know more. Making a vector graphics is to surround multiple anchor points into a shape. This shape can be filled with fill colors or borders:
Then, in other words, a vector diagram is a collection of one or more shapes surrounded by multiple anchor points. Vector illustration andBitmap(Common bitmaps such as JPG, PNG) The most obvious difference is that vector maps have anchor points, while bitmaps do not:
Vector illustration with anchor points
The bitmap has no anchor points
Common vector file formats include ".svg", ".ai", and ".eps", while the only vector format applicable to Xiumi and official accounts is ".svg".
02
What are the taboos for using SVG?
SVGs with very many anchor points cannot be used
Each official account picture and text is actually equivalent to a web page. In addition to the number of main text words that can be seen on the surface, the official account picture and text will actually count the number of code words behind it. Many friends will have a prompt like this when syncing to the official account after using some complex SVG graphics:
At this time, my friends may wonder: I have neither written too many words nor used too many graphics, so why can't I synchronize? If you use SVG graphics and this error occurs, but it is not because you use too many SVG graphics, then it is definitely because the SVG graphics used contain too many anchor points. Some SVG graphics with complex anchor points look like this on the surface:
Just looking at it, there are countless anchor points
The HTML code form of these anchors is even more exaggerated. This one spends more than 20,000 words of SVG code:
Don't say that the web page will crash, I'm all crashing
Although I gave an exaggerated example, which may not be touched in general, I would like to advise everyone not to use SVG graphics with overly complex anchor points.
SVG strokes cannot be changed
Some friends will add strokes to the graphics when making SVG graphics, for example, the star graphic below has a black stroke:
When this graphic is uploaded to Xiumi, the stroke can be displayed normally, but the color cannot be changed in Xiumi's SVG color change function. If you want the stroke to change the color, the solution is very simple. Select this figure in Ai, and then execute Object → Path → Contour Stroke:
This operation can transform the original stroke into a graph, and then change the color after uploading to Xiumi.
SVG does not support fonts
The SVG graphics made by my friends may contain some text that has not been converted into outlines. Most fonts are not supported on Xiumi and WeChat official accounts, but if you want to retain the font in SVG graphics, you can create outlines for the text. The method to create a font outline in Ai is to select the text and select "Create outline" from the right-click menu:
Warm remind everyone, remember to know whether this font is commercially available before using it.
SVG cannot contain bitmaps and clip masks
Some friends may use some JPG or PNG format pictures as the shading of SVG graphics. Although the generated file is ".svg", the ".svg" format containing bitmaps is not supported on the web page. It is also not feasible to force a JPG or PNG file to an SVG file. Please remember this sentence: only anchor points and fill colors in SVG graphics can be recognized on the web page!
Also not supported in SVG format is "Clip Mask". For example, some graphics are cut with a clipping mask, so you can only release the clipping mask:
After releasing the clip mask
Next step
Just find a way to make the same
summary
An SVG graphic is a collection of multiple anchor points that surround one or more figures; when making SVG, try not to use too many anchor points. The strokes and fonts of the figure can be contoured first in Ai before using it. Bitmap and clip mask SVG graphics are not supported. Remember that only the fill color of the anchor points and the graphics can be recognized by the web page. After reading this mine removal post, if you want to continue to understand how to export SVG from Ai, you can continue to read this old post below:
Xiumi's SVG pictures
template
Featured
Emergency clinic
renew
Tip
If you don’t click “good-looking”, how can your leader know that you are motivated?
Editor-in-charge: