目录

Rebirth为什么推荐使用svg图片作为logo

为了什么

本文是为了制作的wordpress主题rebirth的logo设置

主题 repo: Rebirth

使用了svg效果

https://pic.yqqy.top/blog/20200227180134.png?imageMogr2/format/webp/interlace/1
效果图1

https://pic.yqqy.top/blog/20200227180222.png?imageMogr2/format/webp/interlace/1
效果图2

我们可以看出来,效果就是在页面滑动之后会改变填充色,(并不是所有的svg图片都是,下面就说编辑方法)

制作方法

1
2
3
4
5
6
7
8
9
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <g style="isolation:isolate">
        <g fill="#000000">
            
            这里放置你的 `path` 标签
            
        </g>
    </g>
</svg>

举个栗子

阿里icon矢量库,找一个图,并复制svg代码

https://pic.yqqy.top/blog/20200227182608.png?imageMogr2/format/webp/interlace/1
矢量库图标

1
<svg t="1582799138465" class="icon" viewBox="0 0 1267 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23300" width="64" height="64"><path d="M318.82629556 133.78803087C-133.08757287 392.20264631 164.67345974 699.80401596 508.2092303 657.19988601c422.53471382 49.0598287 601.5273088-308.81087989 270.72125986-500.4436034-123.34018755-57.77029413-212.92358917-50.7173058-460.1041946-22.97074138z" fill="#2c2c2c" p-id="23301"></path><path d="M214.90297937 222.368485l54.69674405-224.25466126 103.92331621 177.7631744zM701.6985288 197.75519893l106.65591319-194.16871362 62.89951436 322.70282623zM510.26241218 657.19988601s-16.41051715 257.07071626-51.96414705 281.68151403c-35.55114165 24.61328606 180.49826105 71.10477156 232.45991845 21.87820079 95.3621735-81.27610719-75.53217667-248.9600287-95.71805762-311.76497203-62.38435165-195.77392864-84.77771378 8.20525858-84.77771378 8.20525721z" fill="#2c2c2c" p-id="23302"></path><path d="M687.54526663 901.81463786s148.42632737-11.95573548 201.76423982-119.54740309c53.34040074-107.58917793 20.87276364-193.66101849 32.47012538-227.13409135 11.59487344-33.47307423 67.25474708-167.36287878 201.76423983-90.85512978 134.50949276 76.51023728 122.91461933 188.88021755 62.61580129 217.57248946-60.29632977 28.68978363-166.02644443 25.01147914-97.40291128 0 66.2517982-24.14541025 151.23607471-66.54795404 55.65987362-150.62634235-73.5810334-64.72622317-102.08665291-65.3135569-160.02120218-14.34489113-69.96743372 61.55312413 36.17331813 214.64328419-97.40291126 334.72575757-123.36009791 110.89666592-204.086201 74.11610369-204.08619963 74.11610507z" fill="#2c2c2c" p-id="23303"></path><path d="" fill="#2c2c2c" p-id="23304"></path><path d="" fill="#2c2c2c" p-id="23305"></path><path d="" fill="#2c2c2c" p-id="23306"></path><path d="" fill="#2c2c2c" p-id="23307"></path><path d="" fill="#2c2c2c" p-id="23308"></path></svg>

保留所有的 <path></path>,并去掉 path 里面的 p-id 内容是这样

1
2
3
4
5
6
7
8
9
<path d="M318.82629556 133.78803087C-133.08757287 392.20264631 164.67345974 699.80401596 508.2092303 657.19988601c422.53471382 49.0598287 601.5273088-308.81087989 270.72125986-500.4436034-123.34018755-57.77029413-212.92358917-50.7173058-460.1041946-22.97074138z" fill="#2c2c2c">
</path>
<path d="M214.90297937 222.368485l54.69674405-224.25466126 103.92331621 177.7631744zM701.6985288 197.75519893l106.65591319-194.16871362 62.89951436 322.70282623zM510.26241218 657.19988601s-16.41051715 257.07071626-51.96414705 281.68151403c-35.55114165 24.61328606 180.49826105 71.10477156 232.45991845 21.87820079 95.3621735-81.27610719-75.53217667-248.9600287-95.71805762-311.76497203-62.38435165-195.77392864-84.77771378 8.20525858-84.77771378 8.20525721z" fill="#2c2c2c">
</path>
<path d="M687.54526663 901.81463786s148.42632737-11.95573548 201.76423982-119.54740309c53.34040074-107.58917793 20.87276364-193.66101849 32.47012538-227.13409135 11.59487344-33.47307423 67.25474708-167.36287878 201.76423983-90.85512978 134.50949276 76.51023728 122.91461933 188.88021755 62.61580129 217.57248946-60.29632977 28.68978363-166.02644443 25.01147914-97.40291128 0 66.2517982-24.14541025 151.23607471-66.54795404 55.65987362-150.62634235-73.5810334-64.72622317-102.08665291-65.3135569-160.02120218-14.34489113-69.96743372 61.55312413 36.17331813 214.64328419-97.40291126 334.72575757-123.36009791 110.89666592-204.086201 74.11610369-204.08619963 74.11610507z" fill="#2c2c2c"></path>
<path d="" fill="#2c2c2c">
</path>
<path d="" fill="#2c2c2c"></path><path d="" fill="#2c2c2c"></path>
<path d="" fill="#2c2c2c"></path><path d="" fill="#2c2c2c"></path>

将这段代码全部复制到上面那个代码块中就好了。