虚幻引擎logo矢量图svg源码!
由于网上很难找到虚幻引擎的矢量图logo，自己画又太麻烦，偶然间发现官方的ContentExample仓库（内容示例）中有一个用样条线spline实现的logo：
这个logo完全使用三次贝塞尔曲线（Bézier）实现的，而且与每个点相邻的2个控制点对称，因此可以使用svg中的S(x2,y2,x,y)函数：
S(x2,y2,x,y)传入4个参数，表示【后控制点】和【终点】的横坐标和纵坐标，而【起点】则是上一个S()函数的x和y，【前控制点】则是上一个S()函数的x2和y2，所以不需要x1和y1。如果上一段曲线不是S()函数，那么【前控制点】就是【起点】，这段曲线降维成二次贝塞尔曲线。还要写一个蓝图脚本将UE5中的spline转成svg代码：
这段代码将spline上的每个点（起点、终点）以及切线（控制点）拼接成svg字符串，最终打印到输出日志里，再复制粘贴到.svg文件中就完事了，最后稍微优化一下代码，得到如下的svg：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 0 150 200">
<path transform=" translate(0 200) scale(1 -1)"
d=" M -72 79 S -72 79 -72 79 S -83.393 86.313 -51 122 S -11.511 148.677 -11 149 S -24.086 131.036 -20 125 S -13.909 119.078 -14 120 S -16.199 70.35 -13 59 S 13.972 56.928 14 63 S 16 97.75 14 113 S 5.25 121.25 6 124 S 17.223 124.778 17 124 S 37.3 139.321 48 142 S 33.183 130.613 34 116 S 31.669 77.319 35 61 S 73.468 82.808 71.968 76.058 S 36.426 34.102 29 34 S 21.75 44.75 14 44 S 2.267 35.104 -2 31 S -40.386 46.284 -42 49 S -36.75 43 -35 58 S -32.602 95.035 -35 109 S -68.134 101.673 -72 79 " />
</svg>成功复现出了全网独一无二的虚幻引擎logo的矢量图。无论是UE5的样条线还是SVG的<path>标签，本质上都是利用贝塞尔曲线这个大杀器实现各种各样的图形，贝塞尔曲线本质上也就是中学里学过的多项式而已，非常简单粗暴。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-06-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号