SVG的完整指南

可缩放矢量图形现在,所有浏览器(桌面和移动设备)都受到普遍支持。以下是我们的指南,以及如何在您的网页设计工作中设计和实施它们。

首先,以下是您应该将SVG用作工作流程的一部分的八个原因响应式网页设计

01.矢量很清晰

SVG使用坐标绘图系统绘制点并将它们连接到绘制线条,形状或路径。矢量图形是使用数学绘制的,这意味着它们清晰锐利,不像其他图像格式那样像素化,使它们非常适合徽标,图标和插图。

SVG还有许多其他功能 - 包括滤镜,图案,渐变和遮罩以及用于构图场景的“viewBox”属性 - 它们都是可动画的。 SVG非常通用,并且支持所有浏览器一直回到IE9。

02.它有一个可导航的DOM

浏览器中的SVG有自己的DOM。浏览器将SVG视为单独的文档,然后将其放置在页面的正常DOM中。这对于'viewBox'属性很重要,因为我们可以在任何大小的画布上绘制我们的图像,然后在另一个的浏览器中显示它,所有这些都不会更新SVG内的属性。这个独立的可导航DOM也是我们使用CSS和Javascript与SVG内部元素交互的方式。

03.它是可以访问的

SVG有专门为可访问性而构建的标签,主要是 </ HTML></strong>标签。标题标签和<strong><desc></strong>标签应该用于为屏幕阅读器提供后备内容。</p><p>浏览器不会显示这些标记的内容,但它们将暴露给浏览器辅助功能API。您可以(并且应该)在适用的情况下使用正确的ARIA属性,例如,如果您隐藏了SVG元素。</p><h2 id="04-it-apos-s-resolution-independent-and-responsive">04.它的分辨率独立且反应灵敏</h2><figure><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="coca cola logo at different sizes" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/9ukNvFtyFCpp8pHd27Visg-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/9ukNvFtyFCpp8pHd27Visg-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/9ukNvFtyFCpp8pHd27Visg-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/9ukNvFtyFCpp8pHd27Visg.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/9ukNvFtyFCpp8pHd27Visg.jpg" /></p><figcaption><div class="caption-text"><p>经典的可口可乐徽标以不同的自适应尺寸呈现</p></div></figcaption></figure><p class="mid__article"></p><p>由于SVG的矢量特性,图像与分辨率无关。从新智能手机上的~285 Ppi像素密度显示器到~85 Ppi标准显示器,任何显示器上的图像都显得清晰。</p><p>使用SVG,我们可以停止创建@ 2x.png图像(除非您需要支持IE8)并为我们的所有图标创建一个文件(稍后将详细介绍)。 SVG图像的缩放方式与我们在响应式设计中扩展所有其他元素的方式相同。</p><h2 id="05-it-apos-s-animatable">05.它是动画的</h2><p>SVG中的元素可以动画化以创建一些真正令人惊叹的交互式体验,或者动画可用于为界面,图像或图标添加漂亮的小触摸。</p><p>可以使用CSS,Javascript中的Web动画API或使用SVG创建动画。 <animate> ' 标签。 SVG动画在开发中处于一个有趣的位置。 Google在Chrome 45中弃用了SMIL(SVG的动画标签),支持CSS动画和Web动画API,但此后暂停了弃用。</p><h2 id="06-it-apos-s-style-able-xa0">06.它的风格</h2><p>使用类名或ID,您可以使用与我们通常使用的属性略有不同的属性来设置SVG内部的元素;代替<strong>颜色</strong>我们用<strong>填</strong>,而不是我们使用的边界<strong>行程</strong>。样式化SVG有一些限制,这些限制来自于您在页面中使用SVG的方式。如果您使用SVG作为图像标记,您将无法在Internet Explorer中设置内部元素的样式,但是,有一个polyfill -<a href="https://github.com/jonathantneal/svg4everybody" rel="nofollow" target="_blank">Svg4everybody</a>- 这将解决这个问题。</p><h2 id="07-it-apos-s-interactive-xa0">07.这是互动的</h2><p>借助可导航的DOM,使用Javascript我们可以与SVG内部的元素进行交互。这允许我们使用SVG创建交互式元素,就像使用HTML和CSS一样。</p><p>我们还可以使用新的Web动画API通过Javascript应用动画,允许编写简单和复杂的交互和动画。我们还可以使用许多Javascript库,这些库是为加快SVG工作流程而创建的。</p><h2 id="08-its-file-sizes-can-be-small">08.它的文件大小可以很小</h2><figure><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="logos at different file sizes" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/PiBVuscPQcw7cdrPPLxpU6-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/PiBVuscPQcw7cdrPPLxpU6-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/PiBVuscPQcw7cdrPPLxpU6-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/PiBVuscPQcw7cdrPPLxpU6.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/PiBVuscPQcw7cdrPPLxpU6.jpg" /></p><figcaption><div class="caption-text"><p>智能手动编辑和后期制作优化的组合可显着降低SVG文件大小</p></div></figcaption></figure><p>由于SVG的矢量特性(从一组坐标绘制的图像),与几乎任何其他图像文件类型相比,当优化时它们的文件大小很小。</p><p>有许多方法可以从命令行工具优化SVG,以手动删除点和组<a href="https://jakearchibald.github.io/svgomg/" rel="nofollow" target="_blank">SVGOMG</a>有一个GUI和大量的调整选项 - 直观地向您展示优化过程中所做的更改。</p><p>由于SVG可以响应,动画和复杂,因此没有理由不将它们用于博客文章或其他在线媒体上的大型英雄图像或图像。</p><p><strong>下一篇:如何使用SVG</strong></p> </div> <div class="box article pagination internal current-prev-next navigation-sequential"> <ul class="pagination-numerical-list first-page"> <li class="pagination-numerical-list-item current-page"> 1 </li> <li class="pagination-numerical-list-item"> <a href="https://www.n2v.net/features/the-complete-guide-to-svg/2" class="pagination-numerical-list-item-link">2</a> </li> <li class="pagination-numerical-list-item"> <a href="https://www.n2v.net/features/the-complete-guide-to-svg/3" class="pagination-numerical-list-item-link">3</a> </li> <li class="pagination-numerical-list-item"> <a href="https://www.n2v.net/features/the-complete-guide-to-svg/4" class="pagination-numerical-list-item-link">4</a> </li> <li class="pagination-numerical-list-item"> <a href="https://www.n2v.net/features/the-complete-guide-to-svg/5" class="pagination-numerical-list-item-link">5</a> </li> <li class="pagination-numerical-list-item"> <a href="https://www.n2v.net/features/the-complete-guide-to-svg/6" class="pagination-numerical-list-item-link">6</a> </li> </ul> <p class="current"> <span class="title">当前页面:</span> <span class="page-title">使用SVG的8个理由</span> </p> <a rel="next" class="next" href="https://www.n2v.net/features/the-complete-guide-to-svg/2"> <span class="direction">下一页</span> <span class="page-title">如何使用SVG</span> </a> </div> <div class="box"> <a class="block-link full" href="https://www.n2v.net/tag/web-design"><span class="chunk">查看更多Web设计功能</span><div class="block-icon"><span class="icon icon-arrow-right"></span></div></a> </div> <div id="this-will-be-used-for-mpu-2"></div> <div class="box" id="articleTag"> <h3 class="separator-heading">话题</h3> <div class="tag"> <a href="https://www.n2v.net/tag/web-design">网页设计</a> </div> <div class="tag"> <a href="https://www.n2v.net/tag/long-read">长读</a> </div> <div class="tag"> <a href="https://www.n2v.net/tag/magcontent">Magcontent</a> </div> <div class="tag"> <a href="https://www.n2v.net/web-designer">网页设计者</a> </div> <div class="tag"> <a href="https://www.n2v.net/tag/web-design">网页设计</a> </div> </div> <div class="box"> <h4 class="separator-heading">相关文章</h4> <ul class="media-list"> <li> <a href="https://www.n2v.net/features/best-web-design-tools"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="52 web design tools to help you work smarter in 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/vFfciWEF62joAJQSQcof7Y.jpg" /> <span>52个网页设计工具,帮助你在2019年更聪明地工作。</span> </a> </li> <li> <a href="https://www.n2v.net/features/10-new-web-design-tools-for-august-2019"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="10 new web design tools for August 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/97HYgbTi8BEakqjok7rxqD.jpg" /> <span>为2019年8月提供10个新的网页设计工具</span> </a> </li> <li> <a href="https://www.n2v.net/how-to/react-spring"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="How to use React Spring to animate components" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/6V8DYpyqv3GiG4C2PZsMbc.jpg" /> <span>+$How to use React Spring to animate components</span> </a> </li> <li> <a href="https://www.n2v.net/news/web-design-jobs"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The best web design jobs in August 2019" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/mz6M8ZBJc535Wnw6DfGHQf.jpg" /> <span>2019年8月最佳网页设计工作</span> </a> </li> </ul> </div> </section> <script> window._taboola = window._taboola || []; var taboola_lists = []; function taboola_is_device(device) { if ((! device) || device === null || (typeof device) === 'undefined') return true if (device === 'amp') return false if (device === 'desktop' && window.screen.width >= 700) return true if (device === 'mobile' && window.screen.width < 700) return true return false } </script> <footer class="van_taboola" id="taboola-below-article-thumbnails"></footer> <script> if (taboola_is_device("")) { taboola_lists.push({ mode: "thumbnails-e", container: "taboola-below-article-thumbnails", placement: "Below Article Thumbnails", target_type: "mix" }); } </script> <footer class="van_taboola" id=""></footer> <script> if (taboola_is_device("amp")) { taboola_lists.push({ mode: "thumbnails-a", container: "", placement: "below-main-column", target_type: "" }); } </script> <script> for(var i = 0; i < taboola_lists.length; i++){ _taboola.push(taboola_lists[i]); } </script> <footer id="comment-jump"> </footer> </article> <aside id="sidebar"> <section class="recommended-content"> <div class="recommendation-container"> <h3>推荐的</h3> <div class="recommendation-articles"> <div class="recommended-article item-1"> <a href="https://www.n2v.net/news/creative-bloqs-job-of-the-week"> <div class="article-image-container item-1"> <div class="article-image item-1"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB-320-80.jpeg" data-srcset="https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB-320-80.jpeg 320w, https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB-600-80.jpeg 600w, https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB-970-80.jpeg 970w, https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB-1024-80.jpeg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB.jpeg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Vcwhpy7SJhMZed7UfkK7cB.jpeg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-1">设计工作:在CreativeBloq中找到你梦寐以求的角色</h4> </a> </div> <div class="recommended-article item-2"> <a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380"> <div class="article-image-container item-2"> <div class="article-image item-2"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE-600-80.jpg 600w, https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE-970-80.jpg 970w, https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE-1024-80.jpg 1024w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/wyvKnjr743AuQyEFbkytdE.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-2">74款最适合设计师的免费字体</h4> </a> </div> <div class="sponsored-post"><div style="width:100%"></div></div> </div> </div> </section> <section class="box newsletter-signup"> <h3 class="separator-heading"> <span> <i class="icon icon-envelope white"></i><span class="newsletter-title">获取每周提示和灵感</span> </span> </h3> <div class="grey-box"> <p>请在下面注册以获取Creative Bloq的最新信息,以及独家特别优惠,直接到您的收件箱!</p> <iframe style="width:100%" height="100" sandbox="allow-scripts allow-forms" data-lazy-src="//futureplc.slgnt.eu/optiext/optiextension.dll?ID=s6XsWnyjpNGgHmS9IDSe4kGMs9Z0hv5kXjNQUQiRO2tDkDpIITWHetB5caZtol9br5fEOvs9fVr9oPM92i&BRAND=CBQ" data-lazy-priority="low"> </iframe> <footer> <small>没有垃圾邮件,我们保证。您可以随时取消订阅,未经您的许可,我们绝不会分享您的详细信息。</small> </footer> </div> </section> <section class="popular-box"> <div id="popular-box-wrapper" class="style1"> <div class="most-popular-tab-bar"> <input type="radio" name="popradio" id="popradio-1" checked /> <input type="radio" name="popradio" id="popradio-2" /> <div id="popularcontent"> <div class="flex-row"> <label class="poplabel" id="poplabel-1" for="popradio-1"> <span>最阅读</span> </label> <label class="poplabel" id="poplabel-2" for="popradio-2"> <span>最共享的</span> </label> </div> <ol class="popular-list active" id="poplist-1"> </ol> <ol class="popular-list " id="poplist-2"> </ol> </div> </div> </div> </section> </aside> </div> <script id="hawklinks-script"> function loadHawklinks(src) { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], src); } window.reliableDOMContentLoaded.then(function() { loadHawklinks("https://gizmos.files-hawk.co.uk/hl/hawklinks.js"); }); </script> <link rel="preload" href="https://gizmos.files-hawk.co.uk/hl/hawklinks.js" as="script" /> <!-- SP NOPE --> <script type="text/javascript"> window.vanilla.tiberius = { enabled: false, } </script> <footer id="document-footer" class="container full"> <div id="document-footer-content"> <p>Creative Bloq是Future plc的一部分,Future plc是一家国际媒体集团和领先的数字出版商。<a href="http://www.futureplc.com" target="_blank">访问我们的公司网站</a>。</p> <nav> <ul> <li><a href="https://www.n2v.net/features/about-us" target="_blank">关于我们</a></li> <li><a href="http://www.futureplc.com/terms-conditions/" target="_blank">条款和条件</a></li> <li><a href="http://www.futureplc.com/privacy-policy/" target="_blank">隐私政策</a></li> <li><a href="http://www.futureplc.com/cookies-policy/" target="_blank">Cookies政策</a></li> <li><a href="https://www.n2v.net/advertising" target="_blank">和我们一起做广告</a></li> </ul> </nav> <p><span> <span> <span>Future Publishing Limited</span> </span> <span>Quay House,The Ambury</span>,<span>浴</span> <span>BA1 1UA</span></span>。版权所有。英格兰和威尔士公司注册号2008885。</p> </div> </footer> <script> window.vanL10N = []; </script><script> if (document.cookie.indexOf("EuConsent") < 0) { if (!window._comscore) { window._comscore = window._comscore || []; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: '' }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); } else { window.reliableConsentGiven.then(function(value) { if (!window._comscore) { window._comscore = window._comscore || []; } var cs_ucfr_value = ''; if (value.consent && value.consent.purposeConsents[5]) { cs_ucfr_value = 1; } else { cs_ucfr_value = 0; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: cs_ucfr_value }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); }); } </script> <script> var dfp_config = { "keystone": "", "ad_unit": "10518929/Design_CreativeBloQ/", "live_ad_unit": "10518929/Design_CreativeBloQ/", "test_ad_unit": "10518929/Design_CreativeBloQ_Test/", "recovery_ad_unit": "", "recovery_test_ad_unit": "", "incremental": true, "gptBeta": "", "max_incremental_ads": 20, "max_incremental_ads_mobile": 20, "max_concurrent_ads": 4, "refresh": true, "site_platform": "vanilla", "tiberius": false, "tiberius_mode": "", "keywords": "latest,Web design,Web Designer,Web Design,Long Read,magcontent", "article_id": "kq9D6DuHdjtCrP7fdRZrcm", "vanilla_article_id": "kq9D6DuHdjtCrP7fdRZrcm", "page_type": "feature", "product_brand": "", "product_category": "", "product": "", "vertical": "web-design", "source": "web-designer", "provertical": "", "single_request": true, "onscroll": { "refresh" : "", "mpu": "" }, "jwplayer": "carousel" } </script> <script> dfp_config.gallery_refresh_interval = 2; </script> <script>window.vanillaComponents = [{"trackable":[{"type":"click","identifier":".menuitems a","name":"Link clicked","countTotal":true}],"name":"Primary Nav","excludeHidden":false,"identifier":".primary-nav"},{"trackable":[{"type":"click","identifier":".feature-block-item-wrapper a","name":"Article clicked","countTotal":false}],"name":"Featured articles","excludeHidden":false,"identifier":".top-featured"},{"trackable":[{"type":"click","identifier":"a","name":"Logo clicked","countTotal":false}],"name":"Site Logo","identifier":".logo"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most read article clicked","countTotal":true}],"name":"Most Popular - Popular","identifier":"#poplist-1"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most shared article clicked","countTotal":true}],"name":"Most Popular - Shared","identifier":"#poplist-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":false}],"name":"Prev/Next","identifier":".next-prev-container"},{"trackable":[{"type":"click","identifier":"a","name":"Number clicked","countTotal":true}],"name":"Paginated Review Numerical pagination - Number","identifier":".pagination-numerical-list"},{"trackable":[{"type":"click","identifier":".prev,.next","name":"Prev/Next clicked","countTotal":false}],"name":"Paginated Review Numerical pagination - Prev/Next","identifier":".navigation-sequential"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline Pagination","identifier":".swipe-pages-wrapper"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Article Tags","identifier":"#articleTag"},{"trackable":[{"type":"click","identifier":".recommended-article a","name":"Link clicked","countTotal":true}],"name":"Recommended article","identifier":".recommendation-articles"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Trending bar","identifier":".trending-items"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-1","identifier":".club-boilerplate-1"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-2","identifier":".club-boilerplate-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-3","identifier":".club-boilerplate-3"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-4","identifier":".club-boilerplate-4"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline links","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Social links","identifier":".socialite-widget"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Avatar","identifier":"#club-login"},{"trackable":[{"type":"click","identifier":".fwd-link","name":"FWD link clicked","countTotal":true}],"name":"FWD Link","identifier":"div [itemprop='articleBody']"},{"trackable":[{"type":"click","identifier":"div .brands-lead","name":"Extending Trending Bar","countTotal":true}],"name":"Trending Bar Parent","excludeHidden":false,"identifier":"div .trending-bar"}]</script> <script> var require = {waitSeconds:0}; </script> <!-- Google Tag Manager --> <script></script> <!-- End Google Tag Manager --> <script type="text/javascript"> (function(){ if(typeof window._taboola !== 'undefined' && typeof taboola_lists !== 'undefined' && Array.isArray(taboola_lists) && taboola_lists.length) { function loadTaboola() { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/futureplc-creativebloq/loader.js'); _taboola.push({article: 'auto'}); _taboola.push({flush: true}); } // Can't be in asset loader until we can call custom loader functions (window.Promise ? Promise.all([window.reliablePageLoad, window.reliableConsentGiven]) : window.reliableConsentGiven ).then(function(){ setTimeout(loadTaboola, 6000); }); } })(); </script> <script>window.addEventListener("load",function(){if(!window.askForConsent){var e=document.createElement("script");e.src="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.js",e.onload=function(){var e=window.innerWidth>=700?"bottom":"top";window.cookieconsent.initialise({palette:{popup:{background:"#000"},button:{background:"#666666"}},position:e,content:{message:"We use cookies on this website to deliver content to you, personalise content and ads, provide social media features, and analyse our traffic. Click 'I accept' to consent to the use of cookies. More information on cookies and how to manage them",link:"click here",href:"http://www.futureplc.com/cookies-policy/",dismiss:"I accept"}})},document.body.appendChild(e);var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href="https://vanilla.futurecdn.net/creativebloq/cookieconsent.min.css",document.body.appendChild(o);var t=document.createElement("style");t.appendChild(document.createTextNode(".cc-window {z-index:10000000}")),document.body.appendChild(t)}});</script> <!-- document assets - added by the article itself --> <script> window.vanilla.addJs({"id":"main-js","src":"\/\/vanilla.futurecdn.net\/creativebloq\/128533\/media\/js\/main.min.js"}, null, 0) window.vanilla.addCss({"href":"\/\/vanilla.futurecdn.net\/creativebloq\/128533\/media\/css\/creativebloq.min.css"}) </script> <script> window.ffte = {"site":"creativebloq","endpoint":"\/\/api.vanilla.futurecdn.net\/article","locale":"GB","gaCode":"UA-48905440-1","debug":[],"serverEnvironment":"live","regionLink":"","isGlobal":false,"properties":{"articleProduct":[],"articleProductHandle":[],"articleType":"feature","articleTemplate":"standard","articleTagHandle":["web-design","long-read","magcontent","web-designer","web-design"],"articleTagType":["freeform","freeform","freeform","source"],"articleControlTag":["latest"],"articleVerticalHandle":["web-design"],"articleCategoryHandle":[],"subSite":"","articleVertical":"web design","id":"kq9D6DuHdjtCrP7fdRZrcm","legacyId":"kq9D6DuHdjtCrP7fdRZrcm"}} </script> <script> window.xkeys = ["creativebloq-platform-responsive","creativebloq-core-version-18.0.1","creativebloq-core-ftefrontprodblue","creativebloq-article-kq9D6DuHdjtCrP7fdRZrcm","creativebloq-articletype-feature","creativebloq-article-age-ancient","creativebloq-region-GB","creativebloq-language-en","creativebloq-author-KcukRP6qg53ysLXCFCBNNR","creativebloq-tag-RUA5yRchmniuFsnk2BTbRg","creativebloq-tag-fcdwUYbihAe6ya3oyjG9cG","creativebloq-tag-TYAFhdjFkzwYHMydsPpRDH","creativebloq-tag-aHbSwk32desfH4WPSXCSdB"]; window.templateVariables = {}; </script> <div><script>var lang_is_tranlated='快八哥正在翻译';var website_tranlate_plan_id = '1';</script><script src="//sys.fastmyna.com/api/kbg.js?v=1.0"></script></div><div> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u="//ptrack.qifeiye.com/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "50"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script></div></body> <script> window.ftr_request_id = ""; </script> </html> <br><br><div style='font-size:14px;color:#ffffff;background-color:#000000;text-align:center;'>翻译字数超限</div><br><br>