我是个对自己颜值很自信的人，每天叫醒我起床的不是闹钟，也不是梦想，而是自己的颜值，每每想到我长得如此俊俏，都会从梦中笑醒。
但是，人在江湖飘，哪有不挨刀。
经常出入一些社交场合，难免和和其他的人和物一起照个相什么的。
如果和我合影的是迪丽热巴这样的美女也就算了，但经常在我左右的都是大老爷们，有时候，甚至还有其他完全不知形象为何物的汪科物种，此时我多希望照片中就我一个人，就像下面这样，只有一个美美的我。
该死，直接框个框后面还露出了一双手，右侧还有半个汪星人的身子，完全就是麻子的脸——满是缺点了嘛。
好在我和外面那些只会用美图秀秀的芸芸粉黛不一样，我会真正的PS技术，看我，钢笔工具玩得溜溜的：
把我美好形象外的其他都是都抠图扣掉，啊哈，顿时世界就清爽了。
但是，我发现了一件不太妙的事情，这左下角显示的PNG-24的尺寸-1013k，我去，那就几乎就是1M了啊，虽然说现在取消了漫游费，但是这个流量一点关系都没有啊，再美的照片如果加载不出来也是白搭啊。
不急，还有一种PNG-8格式，尺寸应该可以小一点，果不其然，少了差不多75%，厉害了我的图！
但是，这毛到天际的效果是怎么回事？Oh, No! 这问题可比图片尺寸大严重多了，我宁可显示慢也不要显示出来一副麻子脸。
如果我保存为JPG格式呢？喔噢，尺寸更棒棒哒~
但是，背景不是透明的，不就意味着我只能假装在雪山度假吗？Oh, No! 天要绝我吗，请让我哭一会儿~
慢着，我突然灵光一闪！我们是不是可以使用代码模拟钢笔路径的剪裁效果呢？比方说使用前面多篇文章介绍过的clip-path属性，虽然说现在CSS只支持多边形剪裁，还不支持任意路径的剪裁，但是现在前端新宠SVG支持啊！
所以，我们只需要下面这两样东西就可以得到尺寸小而美靓照了：
第一步，图片SVG载入，例如：
<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> <svg>
第二步，把刚刚使用钢笔工具在勾勒的路径导出到Illustrator中：
此时，我们就有了路径，然后就可以轻松导出为SVG啦！
导出的路径代码示意如下：
然后，在SVG中使用<path>作为检查路径，放在<clipPath>中，同时，将此剪裁路径应用到我们的<image>元素上，如下：
<svg viewBox="0 0 921.17 1409.71">
<defs>
<clipPath id="chris-clip">
<path d=" ... " />
</clipPath>
</defs>
<image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>
结果，当当当当~~
在任何背景下都美美的我就这样出来了。
唉，明早又是注定要被帅醒的一天，真是没办法。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。