专栏首页mySoulSVG可伸缩的矢量图形
原创

SVG可伸缩的矢量图形

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图片

属于所见所得的方式

有两种方式在Adobe系列软件中Illustrator可以直接生成svg的相关代码,还有相关的在线转换网站,可以实现将图片和svg的相互转换,https://www.aconvert.com/cn/format/svg/ 以及 https://convertio.co/zh/svg-converter/

以及一个在线的svg绘图网站http://www.zuohaotu.com/svg/

svg可以支持任意的曲线,文本,动画效果,还能整合js脚本实现。

其中还有一个绘图程序 https://inkscape.org/en/ 可以绘制矢量图

在HTML中嵌入SVG

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <!-- 这里填写svg的相关代码 -->		
	</svg>
</body>
</html>

矩形

下面创建矩形

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg">
		<rect width="300" height="100"
			style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"
		/>
	</svg>
</body>
</html>

使用的是rect标签,创建一个矩形。

width为宽度,height为高度

style为样式,fill代表颜色为蓝色,宽度为1,边框为黑色

圆角矩形

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
		<rect x="10" y="10" width="300" height="100" rx="50" ry="50"/>
	</svg>
</body>
</html>

不透明矩形

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
		<rect x="10" y="10" width="300" height="100" rx="50" ry="50"  fill-opacity="0.5"/>
	</svg>
</body>
</html>

圆形

circle元素可以创建一个圆形

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<circle cx="25" cy="25" r="5"/>
	</svg>
</body>
</html>

实现了一个圆形

椭圆

使用的是ellipse

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<ellipse cx="10" cy="5" rx="10" ry="5"/>
	</svg>
</body>
</html>

直线

使用line绘制

<!DOCTYPE html>
<html>
<head>
	<title>svg页面</title>
</head>
<body>
	<p>这是一个svg</p>

	<!-- svg 图形的命名空间 -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<line x1="0" y1="8" x2="10" y2="20" stroke="black"/>
	</svg>
</body>
</html>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SVG绘制饼状图

    mySoul
  • SVG基础知识 Adobe Illustrator绘制SVG

    此外还有阴影渐变,等滤镜,等就太复杂了,设计到矩阵变换等高等数学的内容,自己有心无力。

    mySoul
  • 设计模式-创建型模式-模板方法

    定义一个操作中的算法框架,将一些步骤延迟到子类中,使得子类可以不改变一个算法的结构即可重定义一个算法的步骤。

    mySoul
  • Vue 使用 vue-svg-icon 插件实现 svg 按需加载

    可以通过上述的一般用法在 Vue 中直接使用 svg,但既然已经是用 Vue来组件化开发项目了,那么在组件中穿插着一大段的 svg 也显得过于杂乱;

    Leophen
  • 如何在react中使用svg icons

    首先,react是支持svg,所以使用svg是没有问题的,但是到目前为止(版本为v15.3.0)还不支持svg的use标签,所以打算使用svg symbol还是...

    IMWeb前端团队
  • 如何在react中使用svg icons

    首先,react是支持svg,所以使用svg是没有问题的,但是到目前为止(版本为v15.3.0)还不支持svg的use标签,所以打算使用svg symbol还是...

    IMWeb前端团队
  • SVG 图标在React项目中的优化

    官方文档:https://webpack.docschina.org/loaders/url-loader/

    javascript.shop
  • 前端-SVG 图像入门教程

    SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是...

    grain先森
  • SVG 图像入门教程

    SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是...

    ruanyf
  • 在 kbone 中实现小程序 svg 渲染

    2019 年底,微信小程序已经推出了近三个年头,我身边的前端开发者基本都做过至少一次小程序了。很多友商曾打算推动小程序进入 W3C 标准,而微信并不为所动,个人...

    binnie

扫码关注云+社区

领取腾讯云代金券