svg绘制logo

原创 2015年11月19日 21:27:24

svg是一种可缩放矢量图,具有体积小巧不失真的优点,适合制作logo或者一些简易的图片。


以下是用svg绘制一个小图标的脚本,用文本编辑器写下如下代码,并保存为.svg格式文件就可以了。

可以在网页中引用该文件显示图片。


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="150" height="150" viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg">

	<rect width="150" height="150" style="fill:rgb(255,0,0);stroke-width:0;stroke:rgb(255,0,0)"/>

	<path d="M20 20 L110 20 L110 30 L30 30 L30 60 L110 60 L110 70 L30 70 L30 100 L110 100 L110 110 L20 110 Z" style="fill:white;stroke:red;stroke-width:0" />
	
	<path d="M40 40 L130 40 L130 130 L40 130 L40 120 L120 120 L120 90 L40 90 L40 80 L120 80 L120 50 L40 50 Z" style="fill:white;stroke:red;stroke-width:0" />

</svg>

图片效果:


Lottie一个可轻松实现各种动画(SVG、Animations)的开源项目

先看一下官网给的图片: 相信肯定不少小伙伴还在为svg,Animations而头疼吗!Lottie这个开源项目的出现,真是久旱逢甘霖(个人感觉)。有些人会认为这些即使不用这也可以实现啊!的确能实...
  • qq_34501274
  • qq_34501274
  • 2017年02月06日 15:33
  • 276

SVG路径动画解密

SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已,刚一出来大家都感觉很炫酷,时间久了也就审美疲劳啦!如果还不知道什么是SVG路径动画的童鞋,快来看一个demo吧:ht...
  • kvhur
  • kvhur
  • 2015年06月24日 10:49
  • 3194

Android VectorDrawable SVG矢量图 xml格式

一个VectorDrawable示例 http://schemas.android.com/apk/res/android//命名空间     android:width="24dp" //在设备上显...
  • QQ18334373taikongyi
  • QQ18334373taikongyi
  • 2016年04月13日 23:06
  • 506

Android等图标制作站点

http://appicontemplate.com/
  • buliuhu123
  • buliuhu123
  • 2015年07月01日 19:15
  • 241

QGIS学习之-显示SVG图片

这个功能其实很简单,但是看到网上很多人不知道怎么做,故记录下帮助需要的朋友。 其实看源码就知道怎么做了。 如果自己重新QGraphicsItem 可以将图片加入图层,但是有很多问题...
  • xpg4321
  • xpg4321
  • 2017年07月28日 11:16
  • 463

java svg 转图片

1,jar包 1.1 batik-all-1.7.jar 1.2 xml-apis-ext.jar 2, java 代码 package com.junlenet.util; imp...
  • huweijun_2012
  • huweijun_2012
  • 2016年11月10日 21:29
  • 1289

开发库 整理

图像: 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网络下载图片并进行缓存。可...
  • zhuzhu_2005
  • zhuzhu_2005
  • 2014年10月30日 09:59
  • 2452

Android SVG动画

Android 5.X SVG矢量动画机制概要Google在Android 5.X中增加了对SVG矢量图形的支持,首先大概了解一下SVG。 可伸缩的矢量图形(Scalable Vector Graph...
  • wangsongbin893603021
  • wangsongbin893603021
  • 2017年01月04日 18:04
  • 515

创建和导出SVG的技巧

我们在响应式网页设计的工作中经常用到SVG,这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式,在图形编辑器中创建SVG效果的每一步...
  • u014695532
  • u014695532
  • 2016年03月25日 21:20
  • 8877

JAVA svg转成png上传到服务器

今天一直烦恼一个问题,就是svg换png,因为我是通过d3.js生成的svg图,可是这样一来,我就没什么办法去将d3.js生成的图上传到服务器去了,我需要获取他的dataURL,那怎么做呢?我试过ca...
  • zzz805
  • zzz805
  • 2016年12月19日 17:10
  • 1428
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:svg绘制logo
举报原因:
原因补充:

(最多只允许输入30个字)