svgdeveloper中文版是一款免費的SVG格式編輯器，具有強大的繪制功能，可以繪制地圖、文本、自由曲線等複雜SVG圖形，強大的代碼編輯器，提供語法著色和智能語法提示等功能，讓編寫程序變得更輕松。需要的朋友可以下載！

svgdeveloper功能

支持文本構造。

更強大的外部圖圖元支持

XAML支持(支持導出和語法提示)

顔色主題支持，可以定制個性化的開發環境

支持柵格圖像和SVG圖像的導入。

按照命名空間和對象類型批量刪除對象

可視化地編輯漸變、圖案並生成相關動畫;

圖形對象的成組和解組以及層次調整功能;

語法自動加亮的代碼編寫機制，方便您書寫SVG代碼;

支持任意形狀的路徑構造(貝賽爾曲線)。

轉換圖像爲base64代碼

支持線性漸變、輻射漸變和圖案渲染。

svgdeveloper特色

繪制各種高質量的SVG矢量圖形，提供包括矩形、橢圓、圓、直線、折線、多邊形等在內的基本形狀構造。

支持任意形狀的路徑構造(貝賽爾曲線)。

支持線性漸變、輻射漸變和圖案渲染。

基于時間線，創作包括變換、屬性、運動、形狀、聲音、遮罩等在內的各種形式動畫，同時可將動畫綁定到事件;

圖形對象的成組和解組以及層次調整功能;

語法自動加亮的代碼編寫機制，方便您書寫SVG代碼;

智能語法提示

智能化的事件創作機制，允許您通過列表式生成對象事件並自動定位到javascript代碼。

打印支持

更強大的外部圖圖元支持

XAML支持(支持導出和語法提示)

顔色主題支持，可以定制個性化的開發環境

SVGDeveloper安裝教程

1、在本站下載，解壓縮，找到安裝文件，雙擊svgdeveloper.msi開始安裝，如圖，點擊【next】

2、阅读安装协议，选择【I Agree】，点击【next】

3、選擇安裝路徑，默認是C盤，想修改點擊【browse】，點擊【next】

4、點擊【next】開始進行安裝

5、安裝完成

SVGDeveloper制作矢量地圖教程

一，首先我們需要找一張地圖作爲模板，找的模板地圖盡量輪廓清晰。

下面我们就拿 吉林地图来作为模板。

二 为了适应 浏览器预览时的大小，我们需要把图片修改下尺寸

一般把高度跳至530px，寬度不用做什麽調整。還有一點就是，盡量吧輪廓修清晰點。

圖片上的文字沒啥影響，爲了做個清晰的模板，我把文字都去掉。

三

1接下来就是 使用svg軟件制作适量图了，首先打开svg，新建svg文件。

2 修改svg画布大小，调至和要使用的图片模板一样大小。

吧宽高改成621 *530

3插入圖片模板

點擊按鈕，插入圖片，然後在畫布上選中區域，會提示插入圖片。

4點完按鈕後，鼠標移至畫板，會成一個十字，然後點畫布左上角，拉到右下角，盡量把畫布占慢重合。松開鼠標後會彈出選擇背景圖片。

5打开后 图片和画布不重叠，可以使用键盘上的方向键移动图片。

6调整好后点一下 黑色箭头。不要再乱动了。

7現在背景圖片調整好以後就是開始扣取區域路徑了，也就是最主要的了。

爲了輪廓更清晰，准確。我們放大到500%

8下面就是開始摳圖了。

1 选中钢笔，这个是点路径用的，把填充颜色跳至无，边框蓝色(一般蓝色，为了教程清晰我设置为红色，还有如果不去掉填充颜色的话，抠图的时候会被填充色覆盖区域，影响抠图!!)

2，使用钢笔，在图片上选取路径，逐个点。如果点错的话就ctrl+z 撤销几步。点取过程中可以使用鼠标滚轮，和下面的滚动條调整显示区域。

3如果點取的時候不小心，路徑不連續了，如圖。那麽撤銷幾步

4然后钢笔 显示一个箭头的时候点一下那个点，就链接起来了，然后继续。

5然后在结束的时候，钢笔显示圈，再点，这样就完成了一个封闭路径。在path 属性路径 最后会有一个Z,这样表示结束了。

6 给区域加文字。 选中text 工具。然后在对应的位置上点击后输入文字。

7下面圈住的的是文本框的IP 可以修改x，y值移动文字位置，如果觉得不合适的话。

8，給路徑和文本框添加id屬性，一邊以後報表數據接口對應。

9，之後就是依法炮制，逐個扣取各個區域，然後添加文字及id屬性。

10所有區域都完成後，把比例縮小。

可以先吧調用背景圖片的這句去掉，然後給各個區域配色。

用箭頭選中不同區域進行配色什麽的也可以改變區域邊框顔色。

path的属性中fill-opacity="0.5" 是填充的透明度，范围是0-1默认是1.

11 最后保存

12 整理说明文档。 这样基本就完成了。