手机购彩

杭州网页设计:可伸缩矢量图形(SVG)入门

2019.08.02 mf_web

96

作为杭州网页设(she)计(ji)师,您(nin)应(ying)该知(zhi)道如何在网站(zhan)中实施SVG(可缩放(fang)矢(shi)量图形(xing))。现在让我(wo)们(men)来看看SVG的基础知(zhi)识,以及(ji)更复杂的设(she)计(ji),如徽标(biao)或图标(biao)。

我们将要创造什么

SVG入门

上面的图片是截图 - 我们将使用SVG而不是图像..

分辨率独立

最近在WWDC 2012上, Apple宣布发布新的视网(wang)膜显(xian)示(shi)器MacBook Pro。Retina显(xian)示(shi)器具有比普通屏(ping)幕(mu)或显(xian)示(shi)器更高(gao)的像素(su)密(mi)度(220.5ppi),并且Apple声称他们的视网(wang)膜技术像素(su)密(mi)度非常高(gao),以至(zhi)于眼睛(jing)在典型的观看距离处无法注意到像素(su)化。如(ru)果你亲眼目睹了视网(wang)膜显(xian)示(shi),那么(me)我(wo)相(xiang)信你会同意他们看起来(lai)很棒。然而(er),这些视网(wang)膜显(xian)示(shi)器可能(neng)开(kai)始给我(wo)们的网(wang)页设(she)计师带来(lai)问题(ti)。

以前保存为72ppi的图像(xiang)现在开始在视网膜显示器上看起来扭曲时(shi)出现问题。这个(ge)问题的手机(ji)购(gou)彩仍未100%解决(jue),设计人员正在寻找尝试(shi)解决(jue)此问题的新方法(fa)。

一种可能的(de)手机购彩(cai)(在某些情况下)是使用SVG。你为(wei)(wei)什么要(yao)使用SVG?SVG被渲(xuan)染为(wei)(wei)矢量(liang),因此(ci)可以(yi)扩展到我们(men)正(zheng)在查看(kan)它(ta)们(men)的(de)任何屏(ping)幕分(fen)辨率,同时(shi)(shi)保持我们(men)在设计它(ta)们(men)时(shi)(shi)所预期的(de)清晰(xi)度(du)和晶(jing)体质量(liang)。

这(zhei)不会解决所有(you)问(wen)题(ti); 我(wo)们无(wu)法使(shi)用(yong)SVG渲(xuan)染基(ji)(ji)于像(xiang)素(su)的(de)(de)图像(xiang),例如.jpg或png(但是(shi),为此我(wo)们总(zong)是(shi)可以(yi)使(shi)用(yong)canvas标记)。当涉及(ji)(ji)到插图图标或徽标之类的(de)(de)东西(xi)时,SVG证明非常有(you)用(yong)。今天,我(wo)将向您展示使(shi)用(yong)SVG的(de)(de)基(ji)(ji)础知识,以(yi)及(ji)(ji)演(yan)示如何使(shi)用(yong)您在(zai)Adobe Illustrator中(zhong)设计的(de)(de)向量(liang)并轻(qing)松地在(zai)您的(de)(de)网站中(zhong)实现它们。

SVG总结为十分

在我们进入之(zhi)前,我将简要介(jie)绍一下(xia)SVG:

  • SVG代(dai)表可缩放矢量图形。

  • SVG用(yong)于在Web上定义(yi)矢量图形(xing)。

  • XML格(ge)式用于定义矢量图形。

  • SVG在调整大(da)小或缩放时不会失(shi)去质量。

  • SVG可以动画。

  • SVG与dom集成(cheng),可以(yi)与JavaScript和CSS一起使用。

  • SVG可以被编入索引,这意味着如果你在SVG中有(you)文本,那么(me)搜索引擎会选择它。

  • SVG可以任何分辨率打印。

  • SVG目前是W3C的推荐(jian)。

  • SVG适用(yong)于(yu)所有现代浏览器,但(dan)在IE 8或更(geng)低版(ban)本(ben)中不支(zhi)持。插(cha)件可以用(yong)于(yu)任(ren)何低于(yu)该(gai)值的插(cha)件。

让我们创建一些SVG形状

让我(wo)们开始吧(ba)。我(wo)们将创建一条线。我(wo)们通(tong)过将以下代码(ma)添加(jia)到HTML文档(dang)来完(wan)成此操作。

1
2
3
<svg>
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/></line>
</svg>

首先我(wo)们(men)使用'svg'标(biao)签然后在里面添(tian)加xml标(biao)记。这是我(wo)们(men)定(ding)义(yi)的内容:

  • X1: x轴上线(xian)的起始位置

  • Y1: y轴上线的(de)起始位置

  • X2: x轴上线的终(zhong)点位置

  • Y2: y轴(zhou)上线的终点位置

因此,例如(ru),如(ru)果(guo)我们(men)想要创建(jian)一(yi)条对(dui)角线(xian),那(nei)么(me)我们(men)可以将y2属性设置为(wei)200,这(zhei)(zhei)将使(shi)该行(xing)的终点减少200,从(cong)而创建(jian)一(yi)条对(dui)角线(xian)。我们(men)也可以应用(yong)(yong)一(yi)些样(yang)式(shi),我们(men)用(yong)(yong)CSS做(zuo)到(dao)这(zhei)(zhei)一(yi)点。这(zhei)(zhei)里我们(men)使(shi)用(yong)(yong)了(le)一(yi)些内联样(yang)式(shi),但如(ru)果(guo)您愿意,可以在(zai)外部样(yang)式(shi)表中使(shi)用(yong)(yong)它们(men)。

SVG  - 创建一条线

1
2
3
<svg>
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>
</svg>

除了一些属性之外,可以以与线(xian)类似的方式创(chuang)建圆(yuan)(yuan)。在这里(li),我们将创(chuang)建一个银色圆(yuan)(yuan)圈,黑色边(bian)框,半径为(wei)50。

SVG  - 创建一个圆圈

1
2
3
<svg>  
    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>
</svg>

cx和(he)cy属性(xing)(xing)是我们可(ke)以设(she)(she)(she)置圆圈中间的(de)x和(he)y坐标的(de)属性(xing)(xing)。如果我们错过(guo)了这些属性(xing)(xing),那么圆圈的(de)中心(xin)将(jiang)被(bei)(bei)设(she)(she)(she)置为“0”,这将(jiang)导致圆圈从页面(mian)中被(bei)(bei)切除。最后,标记为“r”的(de)属性(xing)(xing)设(she)(she)(she)置圆的(de)半径。

矩形

正如您现(xian)在所看到的,使用SVG创(chuang)建形状非常简单。创(chuang)建矩形也不例外。

SVG  - 创建一个矩形

1
2
3
<svg>
<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>
</svg>

与(yu)在CSS中设置元素的(de)宽(kuan)度和(he)高度类似,我们也(ye)使用svg'rect'属性。

椭圆

椭圆(yuan)的(de)(de)工作方式(shi)与创建圆(yuan)的(de)(de)方式(shi)几乎相同(tong),但是,这次(ci)而不是只有(you)一个固定的(de)(de)半(ban)径(jing),我(wo)们(men)有(you)x和y半(ban)径(jing)的(de)(de)单独(du)属性(xing)。

SVG  - 创建一个椭圆

1
2
3
<svg>
 <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
</svg>

多边形

多(duo)边(bian)形变(bian)得有(you)点(dian)棘手(shou)(但(dan)只(zhi)有(you)一(yi)(yi)点(dian)点(dian))。我(wo)们首先(xian)给(ji)多(duo)边(bian)形一(yi)(yi)个(ge)填充颜色(se),一(yi)(yi)个(ge)橙色(se)的笔划和(he)一(yi)(yi)个(ge)10的笔触宽(kuan)度。然后我(wo)们将(jiang)点(dian)属性传递给(ji)它。每(mei)对坐(zuo)标(biao)定义多(duo)边(bian)形的每(mei)个(ge)角点(dian)的x和(he)y坐(zuo)标(biao)。在这个(ge)演示中,我(wo)创造了一(yi)(yi)个(ge)明星。

SVG  - 创建多边形星

1
2
3
<svg>
    <polygon fill="green" stroke="orange" stroke-width="10" points="350, 75  379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
</svg>

文本

如(ru)前所述,SVG很棒,因为当我(wo)们包含文本时,搜索(suo)引(yin)擎(qing)能够对其进行索(suo)引(yin) - 与其他渲染引(yin)擎(qing)(如(ru)Flash)不同。

这是我(wo)们添加文字(zi)的(de)方式:

SVG  - 创建文本

1
<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

在上(shang)面的代码中,您可以看到我们添加了x和y坐标。然(ran)后设置一些(xie)CSS样式(shi),如字体系(xi)列,重量,大小和颜色。

路径

在路(lu)径标记内,我们需要专注于'd'属(shu)(shu)性(xing)。此(ci)“d”属(shu)(shu)性(xing)描述了(le)要创(chuang)建的(de)路(lu)径。'd'属(shu)(shu)性(xing)中的(de)每个命令(ling)都(dou)是以下命令(ling)字母之一,后手机(ji)购(gou)彩其(qi)参(can)数。'd'属(shu)(shu)性(xing)的(de)命令(ling)如下:

  • M:搬到

  • L: lineto

  • H:水平线

  • V:垂直线

  • C: curveto

  • S:平(ping)滑(hua)曲线

  • 问(wen):二次贝(bei)塞尔曲(qu)线

  • T:平滑的二(er)次贝塞尔曲线

  • 答:椭圆弧(hu)

  • Z:近(jin)路

SVG  - 创建路径

这是一些示例代码(ma):

1
2
3
<svg>    
    <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path> 
</svg>

我们(men)甚至可以从上面(mian)设置我们(men)的文本(ben)以遵循这样的路径(jing):

SVG  - 创建文本

1
2
3
4
6
7
8
<svg>    
    <defs>       
        <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>    
    </defs> 
    <text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">     
        <textPath xlink:href="#path1">webdesigntuts+</textPath>    
    </text> 
</svg>

我(wo)们基本上在'defs'标签中定义(yi)了路径,并给它一个id为'path1'。然后,我(wo)们可以使用'textPath'属性将其应用于文(wen)本。

创建可扩展的SVG徽标和图标

杭州网页(ye)设(she)计现在我(wo)们已经介绍了使(shi)用(yong)SVG创建形状的基础知(zhi)识,现在是(shi)时候进行一些(xie)更复杂(za)的事情了。幸(xing)运的是(shi),虽然(ran)它并没有成为那(nei)个复杂(za),其(qi)实(shi)它实(shi)际上是(shi)非常简(jian)单的感谢Adobe Illustrator中。对于(yu)那(nei)些(xie)不(bu)了解(jie)Illustrator的人,可(ke)以描述为:

业界(jie)首(shou)屈一指的矢量绘图环境,用于创建可跨媒体扩展的图形。

打(da)开Illustrator并创建徽标或图标。大(da)多数专业徽标都(dou)应该(gai)使用矢(shi)量(liang)创建,这样您(nin)就(jiu)可以(yi)从客户(hu)那(nei)里获得它(ta)们(men)。如果没有,那(nei)么您(nin)可以(yi)尝试自(zi)己(ji)重新创建它(ta)们(men)。如果您(nin)不熟悉在(zai)Illustrator中(zhong)工作,那(nei)么Vectortuts +上会提(ti)供(gong)大(da)量(liang)信息

获得徽标(biao)或图标(biao)后,转到“文件>另存(cun)(cun)为”,然后从(cong)“保存(cun)(cun)类型”下(xia)拉列(lie)表中选择(ze)“SVG”。为文件命名,然后单击“保存(cun)(cun)”。然后应打(da)开SVG选项对话(hua)框。从(cong)那里选择(ze)“显(xian)示SVG代码(ma)”。然后,这将在(zai)浏(liu)览器(qi)中打(da)开代码(ma)。你只需要(yao)在(zai)svg标(biao)签之间复(fu)制并包(bao)含svg标(biao)签就可以了。这有多简单?

SVG  - 从Adobe Illustrator中保存
SVG  - 显示Adobe Illustrator中的代码

您还可以(yi)使用(yong)Illustrator创(chuang)建路(lu)径(jing)(jing)。只需在Illustrator中(zhong)绘制一条线(xian),就(jiu)可以(yi)获(huo)取可用(yong)于路(lu)径(jing)(jing)的“d”属性数据,如前(qian)所述。例如,我为上面的'webdesigntuts +'文本创(chuang)建的路(lu)径(jing)(jing)是在Illustrator中(zhong)创(chuang)建的,然后导(dao)出到我的文档中(zhong)。

然后,您可(ke)以(yi)(yi)使用标准CSS方法将SVG标记(ji)设置或(huo)定位(wei)到(dao)文(wen)档中。您还可(ke)以(yi)(yi)将其(qi)包装在锚标记(ji)中以(yi)(yi)创建(jian)链(lian)接,或(huo)使用JavaScript将其(qi)定位(wei)以(yi)(yi)添加额外(wai)的功能(neng)。

结论

杭州(zhou)网页设计现在,视网膜(mo)和(he)像素密(mi)度(du)是我(wo)们使(shi)用(yong)的(de)(de)每(mei)个设备和(he)屏(ping)幕(mu)的(de)(de)一(yi)部分只是一(yi)个时(shi)间问题(ti),并且这将继续以更大的(de)(de)密(mi)度(du)推(tui)进。通过使(shi)用(yong)SVG,我(wo)们能(neng)够创建可缩放的(de)(de)图(tu)(tu)形,使(shi)屏(ping)幕(mu)清晰,随着屏(ping)幕(mu)分辨率的(de)(de)提高,它将为(wei)未来做好准备。当然,SVG在各(ge)种(zhong)情况(kuang)下并不实用(yong),但(dan)对于网络上基于矢量的(de)(de)插图(tu)(tu)而言,它绝(jue)对是最好的(de)(de)前进方式(shi)。

关键词

最新案(an)例

联系电话 400-6065-301

留言

手机购彩(www.angelakelso.com)手机购彩【488推荐】是为当前国内知名的游戏平台网站,是值得您信赖的专业彩票网站,聚集了十多种优秀的经典游戏。提供官方数据,实时开奖,有权威,有保障...