Posted on

Adobe SVG Viewer显示中文的SVG

Embended WinGraphviz in Internet Explorer

Requirement

  • Internet Explorer 4.0 or higher
  • WinGraphviz on your web server or local file

 

Embended

1.Use Cabinet Files:

Cabinet files provide a compact and organized way to store compressed source files.

2.Download “WinGraphviz_v1.xx.x.cab” in your web server :

3.Add the following code in your homepage :

You can add the following code on your HTML,it will download the wingraphviz and embended on your IE.

<OBJECT
ID=”dotObj”
classid=”CLSID:55811839-47B0-4854-81B5-0A0031B8ACEC”
CODEBASE=”http://wingraphviz.sourceforge.net/pub/wingraphviz/WinGraphviz.cab#Version=1,0,2,6″
standby=”Loading GraphViz Component…”
TYPE=”application/x-oleobject”>
</OBJECT>

4.Modifed the CODEBASE property to your “WinGraphviz_v1.xx.x.cab” location.

Feedback

Submit bug reports or suggestions for the WinGraphvizood Tsen.

 

源文档 <http://wingraphviz.sourceforge.net/wingraphviz/case_wingraphviz_in_ie.htm#Requirement>

 

 

Use WinGraphviz with “Picture control” in Visual Basic
 Requirement |  How to do   |  Download this sample Code   |  Download additional sample Code

Requirement

  • WinGraphviz ver 1.02.15 or higher
  • Microsoft Visual Basic 6.0(Just in this case,you can use any other tools like Delphi)

 

How to do

* Step1 : install WinGraphviz first

* Step2 : Open a Visual Basic Project

* Step3 : Drog a PictureBox control to your form and rename it to “ctlPicture”

Set the property AutoSize = True

* Step4 : Drog a TextBox to your form and rename it to “txtInput”

Set the property Multiline = True

add the following dot language in txtInput.Text property
digraph Alf {

size = “6,9”;

node [ shape = record ];

Decl [ label = “\n\nDecl|{name|access|decl_flags|extern_c_linkage}”];

Nontype_decl [ label = “Nontype_decl|{type}”];

Defined_decl [ label = “Defined_decl|{linkage}”];

Data_decl [ label = “Data_decl|{storage_class}”];

Function_decl [ label = “Function_decl|{formals|defaults}”];

Data [ label = “Data|{initializer}”];

Function [ label = “Function|{body}”];

Constructor [ label = “Constructor|{member_initializers}”];

Aggregate ->  Type_decl ;

Class -> Aggregate;

Union -> Aggregate;

Data -> Data_decl;

Data -> Defn;

Data_decl -> Defined_decl;

Data_member ->  Nontype_decl ;

Defined_decl -> Nontype_decl;

Defn -> Defined_decl;

Enum ->  Type_decl ;

Enumerator ->  Nontype_decl ;

Function ->Defn;

Function -> Function_decl;

Constructor ->Function;

Destructor ->Function;

Function_decl -> Defined_decl;

Nontype_decl ->Decl ;

Template_type_arg ->  Type_decl ;

Type_decl ->  Decl ;

Typedef ->  Type_decl ;

}

* Step5 : Drog a Command Button to your form and rename it to “cmdExec”

Add the following code
Private Sub cmdExec_Click()

Dim obj

Set obj = CreateObject(“WINGRAPHVIZ.dot”)

If obj Is Nothing Then Exit Sub

Dim img

Set img = obj.ToGif(txtInput.Text)

If img Is Nothing Then Exit Sub

Set ctlPicture.Picture = img.Picture

End Sub

* Step6 : Build and test it!!

 

Feedback

Submit bug reports or suggestions for the WinGraphviz ood Tsen.

 

源文档 <http://wingraphviz.sourceforge.net/wingraphviz/case_wingraphviz_in_picture.htm>

 

Use WinGraphviz with Adobe SVG Viewer
 Requirement |  How to do

Requirement

  • Internet Explorer ver 4.0 or higher
  • Arcobat SVGViewer ver 3.0
  • WinGraphviz ver 1.01.4

 

How to do

* Step1 : Download the “svghelper.vbs”

* Step2 : Add the following code on your home Page.
<SCRIPT type=”text/vbscript” language=”vbscript” src=”script/svghelper.vbs”>

<SCRIPT type=”text/vbscript” language=”vbscript”>

Sub Render(Byval strDOT,ByRef objSVGViewer)

on error resume next

Rander.disabled = true

Dim obj

Set obj = CreateObject(“WinGraphviz.DOT”)

if obj is Nothing then

Msgbox “Unable to load WinGraphviz ,You may install it first or set this page as trust site in IE !”

else

Dim strSVG

strSVG = obj.ToSVG(strDOT)

if (len(strSVG > 0) ) then

call syncXMLtoSVG(strSVG,objSVGViewer.getSVGDocument())

end if

end if

Set obj = Nothing

Rander.disabled = false

End Sub

</SCRIPT>

* Step3 : Add the “Adobe SVG Viewer” on your homepage.
<embed  ID=”SVGEmbed” NAME=”SVGEmbed”

src=”default.svgz”

width=”800″

height=”800″

type=”image/svg+xml”

PLUGINSPAGE=”http://www.adobe.com/svg/viewer/install/”

>

* Step4 : Integrated them together .
<INPUT name=”Rander” type=”button” value=”Render DOT language to SVG Viewer” onclick=

“vbscript:call Render(txtDOT.value,SVGEmbed)”>

 

Feedback

Submit bug reports or suggestions for the WinGraphviz ood Tsen.

 

源文档 <http://wingraphviz.sourceforge.net/wingraphviz/case_wingraphviz_with_svgviewer.htm>

 

Use WinGraphviz in Unicode(简体中文/GB)
Requirement | How to do in PNG/GIF

Requirement

  • Windows 98 with DCOM 98 (in Simplified Chinese Edition)
  • Windows Me (in Simplified Chinese Edition)
  • Windows NT 4.0 with SP3 or higher (in Simplified Chinese Edition)
  • Windows 2000 Professonal/Workstation/Server Edition
  • Windows XP Home/Professional Edition

 

How to do in PNG/GIF

WinGraphviz ver1.0.2.15 之后的版本,使用宋体为预设字型.

WinGraphviz ver1.0.2.15 使用 Windows 预设Codepage为处理编码格式,在非简体中文的Windows平台需指定 Codepage = 936.

* Step1 : Sample Program in VBScript.
‘Create DOT Object

Dim dot

Set dot = CreateObject(“Wingraphviz.dot”)

if dot is Nothing then

Msgbox “Unable to load the object Wingraphviz.dot”

end if

dot.Codepage = 936

‘Sample data of DOT

strCMD2 = strCMD2 + “digraph prof {     ” + vbcrlf

strCMD2 = strCMD2 + “start [fontname=””黑体”” label=””金庸群侠传”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   book1 [fontname=””黑体”” label=””倚天屠龙记”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   book2 [fontname=””黑体”” label=””雪山飞狐”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   book3 [fontname=””黑体”” label=””天龙八部”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   actor1 [fontname=””黑体”” label=””张无忌”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   actor2 [fontname=””黑体”” label=””张三丰”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   actor3 [fontname=””SimHei”” label=””赵敏”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   start -> book1;” + vbcrlf

strCMD2 = strCMD2 + ”   start -> book2;” + vbcrlf

strCMD2 = strCMD2 + ”   start -> book3;” + vbcrlf

strCMD2 = strCMD2 + ”   book1 -> actor1[ label=””主角”” ];” + vbcrlf

strCMD2 = strCMD2 + ”   book1 -> actor2[ label=””配角””];” + vbcrlf

strCMD2 = strCMD2 + ”   book1 -> actor3[ label=””配角””];” + vbcrlf

strCMD2 = strCMD2 + “}” + vbcrlf

‘Check DOT Format

if(not dot.Validate(strCMD2)) then

msgbox “DOT Format Error”

End if

‘Generate BinaryImage(PNG)

Dim Img

Set Img = dot.ToPNG(strCMD2)

if Img is Nothing then

Msgbox “Unable to generate to PNG”

end if

Dim FilePath

FilePath = “c:\test.PNG”

if Img.save(FilePath) then

Msgbox “BinaryImage Type is ” + Img.Type + vbcrlf + _

“Save Image at ” + FilePath

else

Msgbox “Unable to save image at ” + FilePath

end if

‘Release Resource

Set Img = Nothing

Set obj = Nothing

* Step2 : save it in “c:\test.vbs” and exec it.

* Step3 : Result

 

Feedback

Submit bug reports or suggestions for the WinGraphviz ood Tsen.

 

源文档 <http://wingraphviz.sourceforge.net/wingraphviz/case_wingraphviz_in_gb.htm>

ZGRViewer – Applet

Commands

  • Drag with left mouse button to pan.
  • Use the mouse wheel or hold shift and vertically drag with left mouse button to zoom in/out smoothly.
  • Click a node with left mouse button to zoom on that node.
  • Double-click with left mouse button or single-click with middle mouse button to load the URL associated with a node in a separate browser window.
  • Use arrow keys to pan the view.
  • Use page keys to zoom in/out (animated transitions)
  • Use +/- keys to zoom in/out (no transition, better adapted to the case when users hold the keys down for repeated zooming steps)
  • Move the mouse cursor in the top-left region of the graph window to make the multi-scale tool palette appear. A description of these tools is available.

How to embed ZGRViewer – Applet in an HTML page

If using ZGRViewer 0.9.0 or later (requires Java 1.5):

 

<Applet code=”net.claribole.zgrviewer.ZGRApplet.class” archive=”zvtm-0.10.1-SNAPSHOT.jar,zvtm-svg-0.1.1-SNAPSHOT.jar,zgrviewer-0.9.0-SNAPSHOT.jar,timingframework-1.0.jar” width=”720″ height=”480″> <param name=”type” value=”application/x-java-Applet;version=1.5″ /> <param name=”scriptable” value=”false” /> <param name=”width” value=”720″ /> <param name=”height” value=”480″ /> <param name=”svgURL” value=”http://zvtm.sourceforge.net/zgrviewer/Applet/test1.svg” /> <param name=”title” value=”zgrviewer – Applet” /> <param name=”appletBackgroundColor” value=”#DDD” /> <param name=”graphBackgroundColor” value=”#DDD” /> <param name=”highlightColor” value=”red” /> <param name=”displayOverview” value=”true” /> <param name=”focusNodeMagFactor” value=”2.0″ /> </Applet>

If using ZGRViewer 0.8.2 or earlier (requires Java 1.4):

<Applet code=”net.claribole.zgrviewer.ZGRApplet.class” archive=”zvtm-0.9.8jar,zgrviewer-0.8.2.jar” width=”720″ height=”480″> <param name=”type” value=”application/x-java-Applet;version=1.4″ /> <param name=”scriptable” value=”false” /> <param name=”width” value=”720″ /> <param name=”height” value=”480″ /> <param name=”svgURL” value=”http://zvtm.sourceforge.net/zgrviewer/Applet/test1.svg” /> <param name=”title” value=”zgrviewer – Applet” /> <param name=”appletBackgroundColor” value=”#DDD” /> <param name=”graphBackgroundColor” value=”#DDD” /> <param name=”highlightColor” value=”red” /> <param name=”displayOverview” value=”true” /> <param name=”focusNodeMagFactor” value=”2.0″ /> </Applet>

The JAR files are the ones taken from any zgrviewer release starting from 0.7.0.

ZGRViewer – Applet v0.9.0 requires Java 1.5.0 or later to be installed on the client computer and available to the browser.

ZGRViewer – Applet v0.8.2 requires Java 1.4.0 or later to be installed on the client computer and available to the browser.

No local setup of Graphviz is required, as the result SVG document is produced by Graphviz tools on the server’s side.

For security reasons, the SVG file must be on the same server as the Applet itself. The width and height of the Applet can be parameterized. Be sure to assign the same values to the Applet element’s width attribute and the param element’s width attribute. Same thing for height. The two JAR files can be located anywhere on the server. Just be sure to indicate absolute paths to these files, separated by commas.

The value of the svgURL parameter can of course be generated on the fly. It must point to the SVG file generated by a Graphviz tool such as dot, neato or twopi (server side).

Parameters

Name Value/Purpose Examples Required Since
width An integer number, in pixels 720 yes v0.7.0
height An integer number, in pixels 480 yes v0.7.0
svgURL The URL of the SVG document generated by GraphViz http://zvtm.sourceforge.net/zgrviewer/Applet/test1.svg yes
title Title appearing in the surrounding border zgrviewer – Applet no v0.7.0
showNavControls Display navigation/search controls true, false no v0.7.0
showFCPalette Display tool palette (focus+context navigation tools) true, false no v0.8.0
appletBackgroundColor Applet background color (*) #FFF, #E6F4AA, red, rgb(255,98,2), rgb(10%,24%,98%) no v0.7.0
graphBackgroundColor Graph background color (*) #FFF, #E6F4AA, red, rgb(255,98,2), rgb(10%,24%,98%) no v0.7.0
cursorColor Mouse cursor color in graph window (*) #FFF, #E6F4AA, red, rgb(255,98,2), rgb(10%,24%,98%) no v0.7.0
highlightColor Color of label highlighted by the search feature (*) #FFF, #E6F4AA, red, rgb(255,98,2), rgb(10%,24%,98%) no v0.7.0
antialiased Render the graph with antialiasing (better quality) true, false no v0.7.0
centerOnLabel Initial view of the graph will be centered on the first label in the graph that contains the string given as value of this parameter. If multiple labels match this string, there is no guarantee about which one will be selected by the Applet, and this behaviour is not predictable. Case-insensitive. test47 no v0.7.0
displayOverview Display an overview of the graph in the upper right corner true, false no v0.8.1
target Specify where to open links (new window, same window, etc.). See Java’s AppletContext API for more information. _self, _parent, _top, _blank no v0.8.0
focusNodeMagFactor Magnification factor when focusing on a node 1.0, 5.0 no v0.9.0

(*) Colors can be represented using any of the syntaxes defined by the CSS/SVG specifications.

Hosted by

利用WinGraphviz,根据以下的命令:

digraph G { 1; }

可以得到,如下的SVG文件(  在Adobe SVG Viewer中如果要显示中文的SVG文件,一定要求是整个文件(不仅仅是中文字符串)编码必须是UTF-8。):

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”

http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“>

<!– Generated by WinGraphviz version ver1.02.23, 08/01/2003 (08/04/2003)

For user: YANGYU   Title: G    Pages: 1 –>

<svg width=”148px” height=”84px”

xmlns=”http://www.w3.org/2000/svg“>

<g id=”graph0″ style=”font-family:宋体;font-size:18.67;”>

<title>G</title>

<g id=”node1″><title>1</title>

<ellipse cx=”73″ cy=”39″ rx=”66″ ry=”24″ style=”fill:none;stroke:black;”/>

<text text-anchor=”middle” x=”73″ y=”46″ style=”font-family:SimHei;”><![CDATA[简体中文!]]></text>

</g>

</g></svg>

 

 

参考资料:

http://zh.wikipedia.org/zh/SVG#SVG.E6.8A.80.E6.9C.AF.E7.BB.86.E8.8A.82

http://zh.wikipedia.org/zh-cn/KSVG

 

Leave a Reply

Your email address will not be published.