[关闭]
@Gizmosir 2016-03-19T04:31:44.000000Z 字数 12660 阅读 878

date: 2016-03-
categories: Computer graphics
tag: [SVG, 矢量图]
博客

title: 矢量图像实战——制作个性名片

前言

这是矢量图像的第四篇，如果你没有看过之前的文章，可以点击：

在这一篇中我们将来通过学习制作个性名片的方式来实战练习之前介绍过的SVG知识。首先来欣赏一些很棒的SVG个性名片。

要求

实际上个性名片可以天马行空的随意运用之前介绍过的任意一种滤镜或少数几种。但是为了能够更好地综合运用SVG知识，这里对我们最后的名片效果有几个要求：

  1. 名片尺寸满足长宽比为1.667，比如1000 * 600；
  2. 个人照头像（我们举例中的名片均有头像），并使用卷积矩阵滤镜对头像图片进行一定处理；
  3. 文本信息包含但不仅限于姓名和邮件；
  4. 名片有阴影效果；
  5. 使用一个或多个渐变滤镜；
  6. 添加网页链接；

流程

背景及阴影

首先我们来做比较简单的部分：名片背景以及阴影。首先生成一个1000*600的黑色矩形:

  1. <!--这里我使用黑色填充是因为名片的基色调为黑色。-->
  2.   <rect x="0" y="0" 
  3.      width="1000" height="600"
  4.      style="fill:black" />

接着用feGaussianBlur滤镜来生成名片的阴影：

  1. <!--首先生成一个高斯模糊滤镜，并模糊黑色的矩形输入，将其偏
  2. 移到后下角，接着调整其颜色使阴影变成灰色。-->
  3. <svg
  4.    xmlns="http://www.w3.org/2000/svg"
  5.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  7.   <defs>
  9.     <filter id="shadow"
  10.       color-interpolation-filters = "sRGB">
  12.       <feGaussianBlur in = "SourceGraphic" stdDeviation = "10"/>
  14.       <feOffset  dx = "20" dy = "20" /> <!-- result = "blur" in = "blur" -->
  16.       <feColorMatrix type="matrix" result = "offsetBlur"
  17.               values="0 0 0 0 0.5 
  18.                    0 0 0 0 0.5 
  19.                    0 0 0 0 0.5 
  20.                    0 0 0 1 0" />
  22.     </filter>
  24.   </defs>
  26.   <rect x="100" y="100" 
  27.      width="1000" height="600" 
  28.      style="filter:url(#shadow); " transform = "translate(500, 200) scale(0.8, 0.8) skewX(-20)"/> 
  30.   <rect x="100" y="100" 
  31.      width="1000" height="600" 
  32.      style="fill:black;"/>   
  34. </svg>

名片当然最好能够加上所在公司的logo，可是一般的方法又直接降低了我们名片的逼格。一个很好的方法就是用feConvolveMatrix滤镜来提取logo的边缘，然后使用高斯滤镜模糊一点，最后设置合适的透明度并添加到背景矩形上。

  1.     <filter id="logo"
  2.       color-interpolation-filters="sRGB">
  4.       <feImage xlink:href="http://7xjz11.com1.z0.glb.clouddn.com/logo.png?imageView/2/w/200/h/147" width="200" height="147" /> 
  6.       <feConvolveMatrix
  7.          kernelMatrix="1 1 1 1 -8 1 1 1 1"
  8.          order="3 3" 
  9.          divisor="1"
  10.          bias="0" 
  11.          preserveAlpha="true"/>
  13.       <feGaussianBlur stdDeviation="3"/>
  14.       <feColorMatrix type="luminanceToAlpha"/>
  15.       <feTile x="100" y="100" width="1000" height="600"/>   
  17.     </filter>

文本信息

接下来我们来添加文本信息到名片上。为了延续我们名片高大上的格调，我们使用渐变字体并且给名字加上阴影。

  1.     <filter id="text"
  2.       color-interpolation-filters="sRGB">
  4.       <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
  6.       <feOffset dx="5" dy="5" result="text_2"/>
  8.       <feBlend mode="normal" in="SourceGraphic" in2="text_2"/>
  10.     </filter>
  12.       <g fill="url(#lineargradient2)">
  13.         <text id="nameText" x="540" y="260" style="font-size:60;font-family:verdana;font-weight:bold;filter:url(#text)">Zheng Jiongbin</text>
  14.         <text x="600" y="380" style="font-size:32;font-family:arial;font-style:italic;"  >  
  15.             <tspan x="600" >Nephovision Co.,Ltd</tspan>
  16.             <tspan x="600" dy="60">iOS/Algorithm Engineer</tspan>
  17.             <tspan x="600" dy="40">Gizmosir@Nephovision.com</tspan>
  18.         </text> 
  19.   </g>

个人头像

首先把个人头像从照片上“扣”下来。主要有三种不同的做法，第一种是用裁剪路径。

如果你不想手动一个一个算裁剪路径点的话，这里推荐使用一款叫SVGEdit的能够轻松在网页上编辑SVG的工具。只需将你的图片插入到网页上，然后点点点就能轻松生成裁剪路径，然后再把路径粘贴到你的代码中。

  1. <!--首先定义我在网页上生成的剪裁路径，接着读取图片，并声明一个色彩矩阵用于将头像外的背景透明化，然后将色彩矩阵与头像复合并应用到一个黑色矩形上。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" 
  5.    width="800"
  6.    height="800" >
  8.   <defs>
  11.     <path fill="white" id="path_area" d="m332,176l-118.66667,85.33333l20,92l-18.66667,6.66667l20,89.33333l20,1.33333l22.66667,69.33333l56,44l49.33333,2.66667l66.66667,-56l16,-56l21.33333,-5.33333l20,-73.33333l-13.33333,-16l17.33333,-82.66667l-52,-77.33333l-126.66667,-24z"/>
  13.     <filter id="photo_with_background"
  14.        color-interpolation-filters="sRGB">
  16.       <feImage x="-2%" y="7%" width="70%" height="70%" xlink:href="me.jpg" result="photo"/>
  17.       <feImage xlink:href="#path_area" result="gradient"/>
  19.       <feColorMatrix type="luminanceToAlpha" in="gradient" result="alpha"/>
  20.       <feComposite in="photo" in2="alpha" operator="in" result="face_circle"/>
  22.       <feFlood x="0" y="0" width="800" height="800" flood-color="black" result="black_area"/>
  24.       <feMerge>
  25.         <feMergeNode in="black_area"/>
  26.         <feMergeNode in="face_circle"/>
  27.       </feMerge>
  29.     </filter>
  31.   </defs>
  33. <rect x="0" y="0" width="1000" height="600" 
  34.   style="filter:url(#photo_with_background)"/>
  36. </svg>

第二种是使用径向渐变滤镜。

  1. <!--首先定义了一个矩形的径向渐变，接着将其作为图像进行色彩矩阵将渐变圈外的背景变透明，然后再跟头像进行复合并生成最后的效果。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink"
  5.    width="800"
  6.    height="800" >
  8.   <defs>
  10.     <radialGradient id="face_gradient">
  11.   <stop offset="0" style= "stop-color:white"/> 
  12.   <stop offset=".55" style= "stop-color:white"/> 
  13.   <stop offset=".60" style= "stop-color:grey"/>
  14.   <stop offset=".63" style= "stop-color:black"/>
  15.     </radialGradient> 
  17.     <rect width="800" height="800" fill="url(#face_gradient)" id="gradient_area" transform="translate(-40, -120) scale(1.4, 1.6)"/> 
  19.     <filter id="photo_with_background"
  20.        color-interpolation-filters="sRGB">
  22.       <feFlood x="0" y="0" width="800" height="800" flood-color="black" result="black_area"/>
  24.       <feImage x="1.0%" y="0%" width="80%" height="80%" xlink:href="me.jpg" result="photo"/>
  25.       <feImage xlink:href="#gradient_area" result="gradient"/>
  27.       <feColorMatrix type="luminanceToAlpha" in="gradient" result="alpha"/>
  28.       <feComposite in="photo" in2="alpha" operator="in" result="face_circle"/>
  30.       <feMerge>
  31.         <feMergeNode in="black_area"/>
  32.         <feMergeNode in="face_circle"/>
  33.       </feMerge>
  35.     </filter>
  37.   </defs>
  39. <rect x="0" y="0" width="800" height="800" 
  40.   filter="url(#photo_with_background)"/>
  42. </svg>

不难发现这种方法比第一种效果好很多，但是由于我这里使用的头像背景是白色，名片是黑色，直接使用这种方法效果可能也不是特别好。

头像效果处理

接下来对头像进行一定的处理，首先来试试看模糊效果的卷积矩阵滤镜。

  1. <feConvolveMatrix
  2.          result="face"
  3.          kernelMatrix=".11 .11 .11 .11 .11 .11 .11 .11 .11"
  4.          order="3 3" 
  5.          divisor="1"
  6.          bias="0" 
  7.          preserveAlpha="true" />

效果不太好，由于模糊了看上去就跟丢了神一样。边缘效果肯定是不可行的，毕竟还是要看到头像的嘛，那来试下锐化好了。

  1. <feConvolveMatrix
  2.          result="face"
  3.          kernelMatrix="-1 -1 -1 -1 9 -1 -1 -1 -1"
  4.          order="3 3" 
  5.          divisor="1"
  6.          bias="0" 
  7.          preserveAlpha="true" />

不错不错，看上去很精神！有点名片应该有点样子。接下来用色彩矩阵滤镜调整颜色，降低饱和度让头像看上去“冷峻”一点。

  1. <feColorMatrix type="saturate" values="0.4" result="face" />

接下来用渐变滤镜来给脸部添加一些阴影。

  1.     <linearGradient id="face_gradient1">
  2.       <stop offset= "0.4" style= "stop-color:white"/> 
  3.       <stop offset="0.9" style= "stop-color:black"/>
  4.     </linearGradient>
  6.     <rect width="350" height="450" fill="url(#face_gradient1)" id="gradient_area1" opacity="0.95"/>
  8.     <feImage xlink:href="#gradient_area1" result="gradient1"/>
  10.     <feBlend mode="multiply" in="face" in2="gradient1" result="faceOut" />

不错有点好莱坞大片即视感。

接下来给我头像添加光照。首先尝试SpecularLighting+PointLight的组合。

  1.       <feSpecularLighting result="specular_light" in="faceMid" specularExponent="200" lighting-color="lightgrey">
  2.             <fePointLight x="250" y="200" z="200"/>
  3.       </feSpecularLighting>

效果不是特别好，原因可能是PhotoLigh光源太集中。再尝试下DiffuseLighting+SpotLight的组合。

  1.       <feDiffuseLighting result="diffuse_light" in="SourceGraphic"
  2.         diffuseConstant="100" lighting-color="white" specularExponent="100" >
  4.         <feSpotLight x = "-100" y = "-100" z = "400" pointsAtX = "250" pointsAtY = "250" pointsAtZ = "0" limitingConeAngle = "7"/>
  6.       </feDiffuseLighting>

发现效果更差！主要原因是spotlight需要调整六个参数来改变灯光的效果，非常考验经验与耐心。所以我们还是试下DiffuseLighting+Distanctlight的组合吧。

  1. <feDiffuseLighting result="diffuse_light" in="faceMid"
  2.       diffuseConstant="100" lighting-color="lightgrey" specularExponent="100">
  4.           <feDistantLight azimuth = "45" elevation = "135"/>
  6.       </feDiffuseLighting>

效果同样不是特别好，看来Lighting不是个特别好的滤镜效果。那我们来试下渐变滤镜好了。

  1. <feImage xlink:href="#face_gradient2" />
  2.       <feColorMatrix type="luminanceToAlpha" result="face_4"/>
  3.       <feFlood width="300" height="300" flood-color="white" result="face_5"/>
  4.       <feComposite in="face_5" in2="face_4" result="face_6" operator="in" />

好像稍微好点，最后来尝试下比较复杂的方法：首先生成一个渐变滤镜，然后转换成透明度，再基于透明度来修改原图像的色彩值，最后在还原透明度。

  1.       <feImage xlink:href="#face_gradient2" />
  2.       <feColorMatrix type="luminanceToAlpha" result="face_4"/>
  3.       <feComposite in="face_1" in2="face_4" result="face_6" operator="in" /> 
  6.       <feColorMatrix type="matrix" in="face_7" result="face_17"
  7.            values="1 0 0 1 0 
  8.                    0 1 0 1 0 
  9.                    0 0 1 1 0 
  10.                    0 0 0 1 0 " />
  12.       <feMerge result="face_27">
  13.         <feMergeNode in="face_3"/>
  14.         <feMergeNode in="face_17"/>
  15.       </feMerge>

效果看上去是不是很棒？恩恩，因为不是添加的光源，而是基于图像本身进行的亮度调整，所以看上去更加真实，那就决定使用这种方法吧。

个人链接（Optional）

本来名片设计到这里就全部完成了，但是由于我们是使用SVG生成的名片。也就是说大多数情况下别人都会在网页上打开你的名片，那么为何不尝试在名片上添加个链接让对你感兴趣的人可以进一步了解你呢？

这里为了增加别人点击链接的欲望，我往在链接的文本上添加了一个动画。

  1.     <linearGradient id="lineargradient3">
  2.       <stop offset= "0" style= "stop-color:black"/> 
  3.       <stop offset=".5" style= "stop-color:white"/>
  4.       <stop offset="1.0" style= "stop-color:black"/>
  5.     </linearGradient> 
  7.     <filter id="link"
  8.       color-interpolation-filters="sRGB">
  10.       <feImage xlink:href="#link_gradient" result="link_1"/>
  11.       <feComposite in="SourceGraphic" in2="link_1"  operator="in"/> 
  13.     </filter>  
  15.     <a xlink:href="http://gizmosir.com" > 
  16.             <text x="800" y="650" style="font-size:40;font-family:courier;font-style:oblique;font-weight:bold;filter:url(#link)">Visit More</text>
  17.     </a>

总结

在几乎把所有的滤镜都尝试了也应用之后，我们的名片终于生成了，其最终效果如下。

或者你可以点击这里。

另外需要注意的是，SVG在不同的浏览器以及不同的版本上效果大相径庭。我是就要Chrome 49.0.2623.87版本生成的这张名片，所以建议你复制链接到chrome浏览器上查看。

附录：源代码

  1. <svg
  2.    xmlns="http://www.w3.org/2000/svg"
  3.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  5.   <defs>
  7.     <!--Gradient definition-->
  8.     <radialGradient id="radialGradient1">
  9.       <stop offset="0" style= "stop-color:white"/> 
  10.       <stop offset=".55" style= "stop-color:white"/> 
  11.       <stop offset=".60" style= "stop-color:grey"/>
  12.       <stop offset=".63" style= "stop-color:black"/>
  13.     </radialGradient> 
  15.     <radialGradient id="radialGradient2">
  16.       <stop offset="0" style= "stop-color:#999999"/> 
  17.       <stop offset=".1" style= "stop-color:#888888"/> 
  18.       <stop offset=".3" style= "stop-color:#666666"/> 
  19.       <stop offset=".5" style= "stop-color:#444444"/> 
  20.       <stop offset=".7" style= "stop-color:#222222"/>
  21.       <stop offset=".9" style= "stop-color:#111111"/> 
  22.       <stop offset="1" style= "stop-color:black"/>
  23.     </radialGradient> 
  25.     <linearGradient id="lineargradient1">
  26.       <stop offset= "0.4" style= "stop-color:white"/> 
  27.       <stop offset="0.9" style= "stop-color:black"/>
  28.     </linearGradient>
  30.     <linearGradient id="lineargradient2" x1="100%" y1="0%" x2="100%" y2="100%">
  31.       <stop offset= "0.4" style= "stop-color:#cccccc"/> 
  32.       <stop offset="0.8" style= "stop-color:gray"/>
  33.     </linearGradient>
  35.     <linearGradient id="lineargradient3">
  36.       <stop offset= "0" style= "stop-color:black"/> 
  37.       <stop offset=".5" style= "stop-color:white"/>
  38.       <stop offset="1.0" style= "stop-color:black"/>
  39.     </linearGradient> 
  41.     <!--Rectangle definition-->   
  42.     <rect id="face_area" width="350" height="450" fill="url(#radialGradient1)"  
  43.           transform="translate(-40, -120) scale(1.4, 1.6)"/>
  45.     <rect id="link_gradient" width="400" height="400" fill="url(#lineargradient3)">
  47.       <!--Text animation definition-->
  48.       <animate attributeName="x" 
  49.       begin="0s" dur="2s" 
  50.       values="-400;0" repeatCount="indefinite"/> 
  52.     </rect>       
  54.     <rect id="face_gradient" width="400" height="500" fill="url(#lineargradient1)" opacity="0.95"/>
  56.     <rect id="face_gradient2" width="350" height="350" fill="url(#radialGradient2)" opacity="0.5" transform="translate(-30, -40) scale(1.1, 1.1)"/>
  59.     <!--Shadow filter definition-->
  60.     <filter id="shadow"
  61.       color-interpolation-filters="sRGB">
  63.       <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
  65.       <feOffset  dx="20" dy="20" /> 
  67.       <feColorMatrix type="matrix" 
  68.            values="0 0 0 0 0.5 
  69.                    0 0 0 0 0.5 
  70.                    0 0 0 0 0.5 
  71.                    0 0 0 1 0" />
  72.     </filter>
  75.     <!--Company logo filter definition-->
  76.     <filter id="logo"
  77.       color-interpolation-filters="sRGB">
  79.       <feImage xlink:href="http://7xjz11.com1.z0.glb.clouddn.com/logo.png?imageView/2/w/200/h/147" width="200" height="147" /> 
  81.       <feConvolveMatrix
  82.          kernelMatrix="1 1 1 1 -8 1 1 1 1"
  83.          order="3 3" 
  84.          divisor="1"
  85.          bias="0" 
  86.          preserveAlpha="true"/>
  88.       <feGaussianBlur stdDeviation="3"/>
  89.       <feColorMatrix type="luminanceToAlpha"/>
  90.       <feTile x="100" y="100" width="1000" height="600"/>   
  92.     </filter>
  95.     <!--Text filter definition-->
  96.     <filter id="text"
  97.       color-interpolation-filters="sRGB">
  99.       <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
  101.       <feOffset dx="5" dy="5" result="text_2"/>
  103.       <feBlend mode="normal" in="SourceGraphic" in2="text_2"/>
  105.     </filter>
  107.     <!--Link animition definition-->
  108.     <filter id="link"
  109.       color-interpolation-filters="sRGB">
  111.       <feImage xlink:href="#link_gradient" result="link_1"/>
  112.       <feComposite in="SourceGraphic" in2="link_1"  operator="in"/> 
  114.     </filter>  
  116.     <!--Face filter definition-->
  117.     <filter id="face"
  118.       color-interpolation-filters="sRGB">
  120.       <feImage xlink:href="http://7xjz11.com1.z0.glb.clouddn.com/me1.jpg" />
  122.       <!--Sharpen and desaturate the face to make it look smarter-->
  123.       <feConvolveMatrix
  124.          kernelMatrix="-1 -1 -1 -1 9 -1 -1 -1 -1 "
  125.          order="3 3" 
  126.          divisor="1"
  127.          bias="0" 
  128.          preserveAlpha="true" />
  129.       <feColorMatrix type="saturate" values="0.4" result="face_1"/>
  131.       <!--Using a linear gradient to increase face layered-->
  132.       <feImage xlink:href="#face_gradient" result="face_2"/>
  133.       <feBlend mode="multiply" in="face_1" in2="face_2" result="face_3" /> 
  135.       <feImage xlink:href="#face_gradient2" />
  136.       <feColorMatrix type="luminanceToAlpha" result="face_4"/>
  137.       <feComposite in="face_1" in2="face_4" result="face_6" operator="in" /> 
  140.       <feColorMatrix type="matrix" in="face_7" result="face_17"
  141.            values="1 0 0 1 0 
  142.                    0 1 0 1 0 
  143.                    0 0 1 1 0 
  144.                    0 0 0 1 0 " />
  147.       <feMerge result="face_27">
  148.         <feMergeNode in="face_3"/>
  149.         <feMergeNode in="face_17"/>
  150.       </feMerge>             
  152.       <!--Using an ellipse gradient to extract the face out-->
  153.       <feImage xlink:href="#face_area" />
  154.       <feColorMatrix type="luminanceToAlpha" result="face_8"/>
  155.       <feComposite in="face_27" in2="face_8" operator="in"/>
  157.     </filter> 
  159.   </defs>
  162.   <rect x="100" y="100" 
  163.      width="1000" height="600" 
  164.      style="filter:url(#shadow); " transform="translate(500, 200) scale(0.8, 0.8) skewX(-20)"/> 
  166.    <rect x="100" y="100" 
  167.      width="1000" height="600" 
  168.      style="fill:#222222;"/> <!--Not pure black will look more actual-->
  170.   <rect x="100" y="100" 
  171.      width="1000" height="600" 
  172.      style="filter:url(#logo);"/>   
  174.   <rect x="127" y="177" width="350" height="450" 
  175.   style="filter:url(#face);" transform="translate(80, 100) scale(0.8, 0.8)"/> 
  177.   <g fill="url(#lineargradient2)">
  178.         <text id="nameText" x="540" y="260" style="font-size:60;font-family:verdana;font-weight:bold;filter:url(#text)">Zheng Jiongbin</text>
  179.         <text x="600" y="380" style="font-size:32;font-family:arial;font-style:italic;"  >  
  180.             <tspan x="600" >Nephovision Co.,Ltd</tspan>
  181.             <tspan x="600" dy="60">iOS/Algorithm Engineer</tspan>
  182.             <tspan x="600" dy="40">Gizmosir@Nephovision.com</tspan>
  183.         </text> 
  184.         <a xlink:href="http://gizmosir.com" > 
  185.             <text x="800" y="650" style="font-size:40;font-family:courier;font-style:oblique;font-weight:bold;filter:url(#link)">Visit More</text>
  186.         </a>
  187.   </g>
  190. </svg>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注