我是个对自己颜值很自信的人，每天叫醒我起床的不是闹钟，也不是梦想，而是自己的颜值，每每想到我长得如此俊俏，都会从梦中笑醒。

但是，人在江湖飘，哪有不挨刀。

经常出入一些社交场合，难免和和其他的人和物一起照个相什么的。

如果和我合影的是迪丽热巴这样的美女也就算了，但经常在我左右的都是大老爷们，有时候，甚至还有其他完全不知形象为何物的汪科物种，此时我多希望照片中就我一个人，就像下面这样，只有一个美美的我。

该死，直接框个框后面还露出了一双手，右侧还有半个汪星人的身子，完全就是麻子的脸——满是缺点了嘛。

好在我和外面那些只会用美图秀秀的芸芸粉黛不一样，我会真正的PS技术，看我，钢笔工具玩得溜溜的：

把我美好形象外的其他都是都抠图扣掉，啊哈，顿时世界就清爽了。

但是，我发现了一件不太妙的事情，这左下角显示的PNG-24的尺寸-1013k，我去，那就几乎就是1M了啊，虽然说现在取消了漫游费，但是这个流量一点关系都没有啊，再美的照片如果加载不出来也是白搭啊。

不急，还有一种PNG-8格式，尺寸应该可以小一点，果不其然，少了差不多75%，厉害了我的图！

但是，这毛到天际的效果是怎么回事？Oh, No! 这问题可比图片尺寸大严重多了，我宁可显示慢也不要显示出来一副麻子脸。

如果我保存为JPG格式呢？喔噢，尺寸更棒棒哒~

但是，背景不是透明的，不就意味着我只能假装在雪山度假吗？Oh, No! 天要绝我吗，请让我哭一会儿~

慢着，我突然灵光一闪！我们是不是可以使用代码模拟钢笔路径的剪裁效果呢？比方说使用前面多篇文章介绍过的clip-path属性，虽然说现在CSS只支持多边形剪裁，还不支持任意路径的剪裁，但是现在前端新宠SVG支持啊！

所以，我们只需要下面这两样东西就可以得到尺寸小而美靓照了：

1. JPG图片
2. 剪裁路径

第一步，图片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>

结果，当当当当~~

在任何背景下都美美的我就这样出来了。

唉，明早又是注定要被帅醒的一天，真是没办法。