AG体育

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

2019.08.02 mf_web

96

ZUOWEIHANGZHOUWANGYESHEJISHI,NINYINGGAIZHIDAORUHEZAIWANGZHANZHONGSHISHISVG(KESUOFANGSHILIANGTUXING)。XIANZAIRANGWOMENLAIKANKANSVGDEJICHUZHISHI,YIJIGENGFUZADESHEJI,RUHUIBIAOHUOTUBIAO。

我们将要创造什么

SVG入门

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

分辨率独立

ZUIJINZAIWWDC 2012SHANG, AppleXUANBUFABUXINDESHIWANGMOXIANSHIQIMacBook Pro。RetinaXIANSHIQIJUYOUBIPUTONGPINGMUHUOXIANSHIQIGENGGAODEXIANGSUMIDU(220.5ppi),BINGQIEAppleSHENGCHENGTAMENDESHIWANGMOJISHUXIANGSUMIDUFEICHANGGAO,YIZHIYUYANJINGZAIDIANXINGDEGUANKANJULICHUWUFAZHUYIDAOXIANGSUHUA。RUGUONIQINYANMUDULESHIWANGMOXIANSHI,NEIMEWOXIANGXINNIHUITONGYITAMENKANQILAIHENBANG。RANER,ZHEIXIESHIWANGMOXIANSHIQIKENENGKAISHIJIWOMENDEWANGYESHEJISHIDAILAIWENTI。

YIQIANBAOCUNWEI72ppiDETUXIANGXIANZAIKAISHIZAISHIWANGMOXIANSHIQISHANGKANQILAINIUQUSHICHUXIANWENTI。ZHEIGEWENTIDEJIEJUEFANGANRENGWEI100%JIEJUE,SHEJIRENYUANZHENGZAIXUNZHAOCHANGSHIJIEJUECIWENTIDEXINFANGFA。

YIZHONGKENENGDEJIEJUEFANGAN(ZAIMOUXIEQINGKUANGXIA)SHISHIYONGSVG。NIWEISHENMEYAOSHIYONGSVG?SVGBEIXUANRANWEISHILIANG,YINCIKEYIKUOZHANDAOWOMENZHENGZAICHAKANTAMENDERENHEPINGMUFENBIANLV,TONGSHIBAOCHIWOMENZAISHEJITAMENSHISUOYUQIDEQINGXIDUHEJINGTIZHILIANG。

ZHEIBUHUIJIEJUESUOYOUWENTI; WOMENWUFASHIYONGSVGXUANRANJIYUXIANGSUDETUXIANG,LIRU.jpgHUOpng(DANSHI,WEICIWOMENZONGSHIKEYISHIYONGcanvasBIAOJI)。DANGSHEJIDAOCHATUTUBIAOHUOHUIBIAOZHILEIDEDONGXISHI,SVGZHENGMINGFEICHANGYOUYONG。JINTIAN,WOJIANGXIANGNINZHANSHISHIYONGSVGDEJICHUZHISHI,YIJIYANSHIRUHESHIYONGNINZAIAdobe IllustratorZHONGSHEJIDEXIANGLIANGBINGQINGSONGDIZAININDEWANGZHANZHONGSHIXIANTAMEN。

SVG总结为十分

ZAIWOMENJINRUZHIQIAN,WOJIANGJIANYAOJIESHAOYIXIASVG:

  • AG体育SVGDAIBIAOKESUOFANGSHILIANGTUXING。

  • SVGYONGYUZAIWebSHANGDINGYISHILIANGTUXING。

  • AG体育XMLGESHIYONGYUDINGYISHILIANGTUXING。

  • AG体育SVGZAIDIAOZHENGDAXIAOHUOSUOFANGSHIBUHUISHIQUZHILIANG。

  • SVGKEYIDONGHUA。

  • SVGYUdomJICHENG,KEYIYUJavaScriptHECSSYIQISHIYONG。

  • SVGKEYIBEIBIANRUSUOYIN,ZHEIYIWEIZHERUGUONIZAISVGZHONGYOUWENBEN,NEIMESOUSUOYINQINGHUIXUANZETA。

  • AG体育SVGKEYIRENHEFENBIANLVDAYIN。

  • AG体育SVGMUQIANSHIW3CDETUIJIAN。

  • SVGSHIYONGYUSUOYOUXIANDAILIULANQI,DANZAIIE 8HUOGENGDIBANBENZHONGBUZHICHI。CHAJIANKEYIYONGYURENHEDIYUGAIZHIDECHAJIAN。

让我们创建一些SVG形状

AG体育RANGWOMENKAISHIBA。WOMENJIANGCHUANGJIANYITIAOXIAN。WOMENTONGGUOJIANGYIXIADAIMATIANJIADAOHTMLWENDANGLAIWANCHENGCICAOZUO。

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

SHOUXIANWOMENSHIYONG'svg'BIAOQIANRANHOUZAILIMIANTIANJIAxmlBIAOJI。ZHEISHIWOMENDINGYIDENEIRONG:

  • AG体育X1: xZHOUSHANGXIANDEQISHIWEIZHI

  • AG体育Y1: yZHOUSHANGXIANDEQISHIWEIZHI

  • X2: xZHOUSHANGXIANDEZHONGDIANWEIZHI

  • Y2: yZHOUSHANGXIANDEZHONGDIANWEIZHI

AG体育YINCI,LIRU,RUGUOWOMENXIANGYAOCHUANGJIANYITIAODUIJIAOXIAN,NEIMEWOMENKEYIJIANGy2SHUXINGSHEZHIWEI200,ZHEIJIANGSHIGAIXINGDEZHONGDIANJIANSHAO200,CONGERCHUANGJIANYITIAODUIJIAOXIAN。WOMENYEKEYIYINGYONGYIXIEYANGSHI,WOMENYONGCSSZUODAOZHEIYIDIAN。ZHEILIWOMENSHIYONGLEYIXIENEILIANYANGSHI,DANRUGUONINYUANYI,KEYIZAIWAIBUYANGSHIBIAOZHONGSHIYONGTAMEN。

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>

CHULEYIXIESHUXINGZHIWAI,KEYIYIYUXIANLEISIDEFANGSHICHUANGJIANYUAN。ZAIZHEILI,WOMENJIANGCHUANGJIANYIGEYINSEYUANQUAN,HEISEBIANKUANG,BANJINGWEI50。

SVG  - 创建一个圆圈

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

AG体育cxHEcySHUXINGSHIWOMENKEYISHEZHIYUANQUANZHONGJIANDExHEyZUOBIAODESHUXING。RUGUOWOMENCUOGUOLEZHEIXIESHUXING,NEIMEYUANQUANDEZHONGXINJIANGBEISHEZHIWEI“0”,ZHEIJIANGDAOZHIYUANQUANCONGYEMIANZHONGBEIQIECHU。ZUIHOU,BIAOJIWEI“r”DESHUXINGSHEZHIYUANDEBANJING。

矩形

AG体育ZHENGRUNINXIANZAISUOKANDAODE,SHIYONGSVGCHUANGJIANXINGZHUANGFEICHANGJIANDAN。CHUANGJIANJUXINGYEBULIWAI。

SVG  - 创建一个矩形

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

AG体育YUZAICSSZHONGSHEZHIYUANSUDEKUANDUHEGAODULEISI,WOMENYESHIYONGsvg'rect'SHUXING。

椭圆

TUOYUANDEGONGZUOFANGSHIYUCHUANGJIANYUANDEFANGSHIJIHUXIANGTONG,DANSHI,ZHEICIERBUSHIZHIYOUYIGEGUDINGDEBANJING,WOMENYOUxHEyBANJINGDEDANDUSHUXING。

SVG  - 创建一个椭圆

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

多边形

DUOBIANXINGBIANDEYOUDIANJISHOU(DANZHIYOUYIDIANDIAN)。WOMENSHOUXIANJIDUOBIANXINGYIGETIANCHONGYANSE,YIGECHENGSEDEBIHUAHEYIGE10DEBICHUKUANDU。RANHOUWOMENJIANGDIANSHUXINGCHUANDIJITA。MEIDUIZUOBIAODINGYIDUOBIANXINGDEMEIGEJIAODIANDExHEyZUOBIAO。ZAIZHEIGEYANSHIZHONG,WOCHUANGZAOLEYIGEMINGXING。

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>

文本

RUQIANSUOSHU,SVGHENBANG,YINWEIDANGWOMENBAOHANWENBENSHI,SOUSUOYINQINGNENGGOUDUIQIJINXINGSUOYIN - YUQITAXUANRANYINQING(RUFlash)BUTONG。

AG体育ZHEISHIWOMENTIANJIAWENZIDEFANGSHI:

SVG  - 创建文本

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

AG体育ZAISHANGMIANDEDAIMAZHONG,NINKEYIKANDAOWOMENTIANJIALExHEyZUOBIAO。RANHOUSHEZHIYIXIECSSYANGSHI,RUZITIXILIE,ZHONGLIANG,DAXIAOHEYANSE。

路径

ZAILUJINGBIAOJINEI,WOMENXUYAOZHUANZHUYU'd'SHUXING。CI“d”SHUXINGMIAOSHULEYAOCHUANGJIANDELUJING。'd'SHUXINGZHONGDEMEIGEMINGLINGDOUSHIYIXIAMINGLINGZIMUZHIYI,HOUGENQICANSHU。'd'SHUXINGDEMINGLINGRUXIA:

  • M:BANDAO

  • L: lineto

  • H:SHUIPINGXIAN

  • V:CHUIZHIXIAN

  • C: curveto

  • S:PINGHUAQUXIAN

  • WEN:ERCIBEISAIERQUXIAN

  • T:PINGHUADEERCIBEISAIERQUXIAN

  • DA:TUOYUANHU

  • Z:JINLU

SVG  - 创建路径

ZHEISHIYIXIESHILIDAIMA:

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>

AG体育WOMENSHENZHIKEYICONGSHANGMIANSHEZHIWOMENDEWENBENYIZUNXUNZHEIYANGDELUJING:

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>

AG体育WOMENJIBENSHANGZAI'defs'BIAOQIANZHONGDINGYILELUJING,BINGJITAYIGEidWEI'path1'。RANHOU,WOMENKEYISHIYONG'textPath'SHUXINGJIANGQIYINGYONGYUWENBEN。

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

HANGZHOUWANGYESHEJIXIANZAIWOMENYIJINGJIESHAOLESHIYONGSVGCHUANGJIANXINGZHUANGDEJICHUZHISHI,XIANZAISHISHIHOUJINXINGYIXIEGENGFUZADESHIQINGLE。XINGYUNDESHI,SUIRANTABINGMEIYOUCHENGWEINEIGEFUZA,QISHITASHIJISHANGSHIFEICHANGJIANDANDEGANXIEAdobe IllustratorZHONG。DUIYUNEIXIEBULEJIEIllustratorDEREN,KEYIMIAOSHUWEI:

YEJIESHOUQUYIZHIDESHILIANGHUITUHUANJING,YONGYUCHUANGJIANKEKUAMEITIKUOZHANDETUXING。

AG体育DAKAIIllustratorBINGCHUANGJIANHUIBIAOHUOTUBIAO。DADUOSHUZHUANYEHUIBIAODOUYINGGAISHIYONGSHILIANGCHUANGJIAN,ZHEIYANGNINJIUKEYICONGKEHUNEILIHUODETAMEN。RUGUOMEIYOU,NEIMENINKEYICHANGSHIZIJIZHONGXINCHUANGJIANTAMEN。RUGUONINBUSHUXIZAIIllustratorZHONGGONGZUO,NEIMEVectortuts +SHANGHUITIGONGDALIANGXINXI

AG体育HUODEHUIBIAOHUOTUBIAOHOU,ZHUANDAO“WENJIAN>LINGCUNWEI”,RANHOUCONG“BAOCUNLEIXING”XIALALIEBIAOZHONGXUANZE“SVG”。WEIWENJIANMINGMING,RANHOUDANJI“BAOCUN”。RANHOUYINGDAKAISVGXUANXIANGDUIHUAKUANG。CONGNEILIXUANZE“XIANSHISVGDAIMA”。RANHOU,ZHEIJIANGZAILIULANQIZHONGDAKAIDAIMA。NIZHIXUYAOZAIsvgBIAOQIANZHIJIANFUZHIBINGBAOHANsvgBIAOQIANJIUKEYILE。ZHEIYOUDUOJIANDAN?

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

NINHAIKEYISHIYONGIllustratorCHUANGJIANLUJING。ZHIXUZAIIllustratorZHONGHUIZHIYITIAOXIAN,JIUKEYIHUOQUKEYONGYULUJINGDE“d”SHUXINGSHUJU,RUQIANSUOSHU。LIRU,WOWEISHANGMIANDE'webdesigntuts +'WENBENCHUANGJIANDELUJINGSHIZAIIllustratorZHONGCHUANGJIANDE,RANHOUDAOCHUDAOWODEWENDANGZHONG。

AG体育RANHOU,NINKEYISHIYONGBIAOZHUNCSSFANGFAJIANGSVGBIAOJISHEZHIHUODINGWEIDAOWENDANGZHONG。NINHAIKEYIJIANGQIBAOZHUANGZAIMAOBIAOJIZHONGYICHUANGJIANLIANJIE,HUOSHIYONGJavaScriptJIANGQIDINGWEIYITIANJIAEWAIDEGONGNENG。

结论

HANGZHOUWANGYESHEJIXIANZAI,SHIWANGMOHEXIANGSUMIDUSHIWOMENSHIYONGDEMEIGESHEBEIHEPINGMUDEYIBUFENZHISHIYIGESHIJIANWENTI,BINGQIEZHEIJIANGJIXUYIGENGDADEMIDUTUIJIN。TONGGUOSHIYONGSVG,WOMENNENGGOUCHUANGJIANKESUOFANGDETUXING,SHIPINGMUQINGXI,SUIZHEPINGMUFENBIANLVDETIGAO,TAJIANGWEIWEILAIZUOHAOZHUNBEI。DANGRAN,SVGZAIGEZHONGQINGKUANGXIABINGBUSHIYONG,DANDUIYUWANGLUOSHANGJIYUSHILIANGDECHATUERYAN,TAJUEDUISHIZUIHAODEQIANJINFANGSHI。

ZUIXINANLI

联系电话 400-6065-301

JIANZHANZIXUN XINGXING-ZONGJIAN

TOUSU