diff options
Diffstat (limited to 'graphics/circuit_macros/examples/svg/tstSVG.htmx')
-rw-r--r-- | graphics/circuit_macros/examples/svg/tstSVG.htmx | 261 |
1 files changed, 176 insertions, 85 deletions
diff --git a/graphics/circuit_macros/examples/svg/tstSVG.htmx b/graphics/circuit_macros/examples/svg/tstSVG.htmx index 65425998fc..ccb14e00b8 100644 --- a/graphics/circuit_macros/examples/svg/tstSVG.htmx +++ b/graphics/circuit_macros/examples/svg/tstSVG.htmx @@ -5,63 +5,131 @@ <meta http-equiv="Content-Style-Type" content="text/css"> <!--meta http-equiv="Content-Script-Type" content="text/javascript"--> <TITLE>SVG Examples: Circuit_macros Version XXX</TITLE> +<meta name="keywords" content="HTML" +content='Circuit elements, basic circuits, logic circuits and other diagrams, +electric circuits, resistor, capacitor, inductor, diode, sources, amplifier, +integrator, fuse, switch, antenna, opamp, transformer, relay, contact, jack, +plug, FET, UJT, thyristor, bipolar transistor, nport, windings, timer, +optical isolator, rectifier, bistable, oscillator, CMOS, MOSFET, power supply, +NAND gate, controlled source, synchronous machine, digital circuit, signal-flow +graph, latch, decoder, flipflop, full adder, logic diagram, crossbar switch, +dimensioning, control system, graph, RGB colors, recursion, binary tree, +flowcharts, picture overlay, ASME Y14.5' > + <style type="text/css"> </style> +<link rel="shortcut icon" href="../Circuit_macros.ico" type="image/x-icon" /> </HEAD> -<BODY> -<H2>SVG Circuit_macros examples, Version XXX</H2> -<hr> +<!-- --------------------------------------------------------------------- +define(`ifinstr',`ifelse(`$2',,`$1',index(`$1',`$2'),-1, + `ifinstr(shift(shift(shift($@))))',`$3')') -<p> - These diagrams are in .svg format. - <A HREF="examples.pdf">Pdf</A> - and - <A HREF="examples.html">png</A> - versions are also available. - The PDF equivalent can be found in examples.pdf of the distribution. -</p> - <p> - Click on the link to view the source of each diagram. -</p> -<hr> +define(`m4tt',`<g style="font-family:monospace">') define(`cfig',` <p> -<!--[if lt IE 9]><embed src="$1.svg" sinclude($1.siz)><![endif]--> + +<!--[if lte IE 8]><embed src="$1.svg" sinclude($1.siz)><![endif]--> <!--[if gte IE 9]> -<object data="$1.svg" sinclude($1.siz) type="image/svg+xml" class="img"> +<object dx="4" data="$1.svg" sinclude($1.siz) type="image/svg+xml" class="img"> </object> <![endif]--> <!--[if !IE]><!--> <object data="$1.svg" sinclude($1.siz) type="image/svg+xml" class="img"> - </object> <!--<![endif]--> + </object> <![endif]--> + +<br><br> +ifelse(`$2',,,` +<a href="$1.txt" TYPE="text/plain" TARGET="_blank" alt="$1">$1.m4:</a> +`$2' changecom(,)&`#'8194;changecom(`#')') -<br> -<a href="$1.txt" TYPE="text/plain" TARGET="_blank">$1.m4</a> </p> -<hr>') +ifinstr(`$3',y,,`<hr>')') -define(`m4tt',`<g style="font-family:monospace">') +--------------------------------------------------------------------- --> -<!-- -<embed pluginspage="http://www.adobe.com/svg/viewer/install/" /> ---> +<BODY> +<table cellpadding="0" cellspacing="0" + width="700px" border="0" align="center" ><tr><td> +<H2>SVG Circuit_macros examples, Version XXX</H2> +<hr> + +<p> + This file shows diagrams in .svg format; + <A HREF="examples.html">png</A> + versions are also available. + The PDF equivalent can be found in examples.pdf of the distribution. +</p> + +<p> +The diagrams shown below have been adapted from the Circuit_macros +examples in order to test the svg output of dpic. Generating svg line +art is straightforward, but TeX, LaTeX, and related word +processors do not produce svg. Either less-sophisticated text formatting +must be employed or an + <A HREF="https://en.wikibooks.org/wiki/LaTeX/Export_To_Other_Formats"> + intermediate format</A> +such as pdf can be +produced, followed by an additional processing step to convert to svg. +Two possibilities for the latter are + <A HREF="https://www.ctan.org/pkg/dvisvgm">dvisvgm</A> +and + <A HREF="https://github.com/dawbarton/pdf2svg">pdf2svg</A> although +there may be font-related issues for some diagrams. +<br> +Many circuit and similar diagrams intended for the web do not +require sophisticated labels, however; the examples shown below might +be representative. +</p> <p> -These diagrams have been adapted from the Circuit_macros examples in -order to test the <em>experimental</em> svg output of dpic. -Generating the line art is relatively straightforward, but -the labeling is not created by a text processor and must, therefore, be -more basic. + Click on the link to view the source of each diagram. </p> +<hr> <p> +There are a number of other issues: <ul> + <li> Embedding .svg files in html documents with the <embed> or + <object> tag seems to be a perennial issue. + <li> This file has been tested mainly by using Firefox. + <li> The Adobe reader apparently requires a line of the form + <br> <embed src="figure.svg" width="x" height="y" type="image/svg+xml" + /> + This means that the html file has to contain dimension + information for each figure, whereas Firefox can + determine the figure size + from the <svg ... object. Currently, dpic includes a comment line + giving reasonable dimensions in pixels but this has to be insterted into + the <embed or <object line. A makefile does it easily but + otherwise this could be tedious. + <li> The default font face is not specified in all of these diagrams but is + inherited from the enclosing document, so the appearance of labels can + differ depending on the browser. Some of these diagrams set the font at + the beginning of the diagram source. + <li> The <svg tag may require modification + from the default used for this test. Dpic might be modified to + allow the generation of custom headers but that has not been done. + <li> Diagrams such as these contain text labels + that have to be treated differently from the LaTeX-compatible versions. + Apparently there is no direct way to know the bounding box of arbitrary svg + text. + <!-- text, as discussed + <a href="http://www.aditus.nu/jpgraph/jpg_svg.php" TARGET="_blank">here,</a> + for example. --> + Consequently, text placement is approximate and may require + manual adjustment. + Rather than patch the original source files for svg production, edited copies + have been used. The configuration file svg.m4 read by m4 + prior to libcct.m4 contains the following macros defined for svg. + Others could be defined to exercise some of the media capabilties of svg. + They are subject to change: <ul> <li> m4tt`'svg_font(</g>font-face,nominal size[:dptextratio],textoffset, dpic commands`'m4tt)</g>: + Change font face, size, textratio and dpic textoffset parameters. Change font face and dpic m4tt`'textht</g>, m4tt`'dptextratio</g>, and m4tt`'textoffset</g> parameters. If arg4 is blank, the font is changed and @@ -95,10 +163,10 @@ more basic. for setting larger or smaller text size, default 100 <li>m4tt svg_sub(</g>text, size percent, y displ, x displ`'m4tt)</g>: subscript - <li>m4tt svg_sup(</g>text, size percent, y displ, x displ`'m4tt)</g>: - superscript <li>m4tt svg_ul(</g>text`'m4tt)</g>: underlined text <li>m4tt svg_ol(</g>text`'m4tt)</g>: overlined text + <li>m4tt svg_sup(</g>text, size percent, y displ, x displ`'m4tt)</g>: + superscript <li>m4tt svg_hat(</g>character`'m4tt)</g>: circumflex-accented character <li>m4tt svg_frac(</g>numerator[:wid], denominator[:wid]`'m4tt)</g>: basic fraction, wid in drawing units @@ -119,81 +187,104 @@ more basic. <li>m4tt svgLinkString</g> as above but for strings attached to objects <li> Greek and other symbols: -<table cellpadding="0" cellspacing="0" width="100%" > +<!-- + Reference: + https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references + and + https://www.toptal.com/designers/htmlarrows/math/ + --> +<table cellpadding="2" cellspacing="0" width="75%" > <tr> -<td width="8%"> m4tt svg_alpha</g> <td align="left"> changecom(,)&`#'945;changecom(`#') -<td width="8%"> m4tt svg_beta</g> <td align="left"> changecom(,)&`#'946;changecom(`#') -<td width="8%"> m4tt svg_Gamma</g> <td align="left"> changecom(,)&`#'915;changecom(`#') -<td width="8%"> m4tt svg_gamma</g> <td align="left"> changecom(,)&`#'947;changecom(`#') -<td width="8%"> m4tt svg_Delta</g> <td align="left"> changecom(,)&`#'916;changecom(`#') -<td width="8%"> m4tt svg_delta</g> <td align="left"> changecom(,)&`#'948;changecom(`#') +<td width="10%"> m4tt svg_alpha</g> <td align="left"> changecom(,)&`#'945;changecom(`#') +<td width="10%"> m4tt svg_beta</g> <td align="left"> changecom(,)&`#'946;changecom(`#') +<td width="10%"> m4tt svg_Gamma</g> <td align="left"> changecom(,)&`#'915;changecom(`#') +<td width="10%"> m4tt svg_gamma</g> <td align="left"> changecom(,)&`#'947;changecom(`#') +<td width="10%"> m4tt svg_Delta</g> <td align="left"> changecom(,)&`#'916;changecom(`#') +<td width="10%"> m4tt svg_delta</g> <td align="left"> changecom(,)&`#'948;changecom(`#') <td width="10%"> m4tt svg_epsilon</g> <td align="left"> changecom(,)&`#'949;changecom(`#') -<td width="8%"> m4tt svg_zeta</g> <td align="left"> changecom(,)&`#'950;changecom(`#') +<td width="10%"> m4tt svg_zeta</g> <td align="left"> changecom(,)&`#'950;changecom(`#') +</tr> <tr> -<td width="8%"> m4tt svg_eta</g> <td align="left"> changecom(,)&`#'951;changecom(`#') -<td width="8%"> m4tt svg_Theta</g> <td align="left"> changecom(,)&`#'920;changecom(`#') -<td width="8%"> m4tt svg_theta</g> <td align="left"> changecom(,)&`#'952;changecom(`#') -<td width="8%"> m4tt svg_iota</g> <td align="left"> changecom(,)&`#'953;changecom(`#') -<td width="8%"> m4tt svg_kappa</g> <td align="left"> changecom(,)&`#'954;changecom(`#') -<td width="8%"> m4tt svg_Lambda</g> <td align="left"> changecom(,)&`#'923;changecom(`#') -<td width="8%"> m4tt svg_lambda</g> <td align="left"> changecom(,)&`#'955;changecom(`#') -<td width="8%"> m4tt svg_mu</g> <td align="left"> changecom(,)&`#'956;changecom(`#') +<td width="10%"> m4tt svg_eta</g> <td align="left"> changecom(,)&`#'951;changecom(`#') +<td width="10%"> m4tt svg_Theta</g> <td align="left"> changecom(,)&`#'920;changecom(`#') +<td width="10%"> m4tt svg_theta</g> <td align="left"> changecom(,)&`#'952;changecom(`#') +<td width="10%"> m4tt svg_iota</g> <td align="left"> changecom(,)&`#'953;changecom(`#') +<td width="10%"> m4tt svg_kappa</g> <td align="left"> changecom(,)&`#'954;changecom(`#') +<td width="10%"> m4tt svg_Lambda</g> <td align="left"> changecom(,)&`#'923;changecom(`#') +<td width="10%"> m4tt svg_lambda</g> <td align="left"> changecom(,)&`#'955;changecom(`#') +<td width="10%"> m4tt svg_mu</g> <td align="left"> changecom(,)&`#'956;changecom(`#') +</tr> <tr> -<td width="8%"> m4tt svg_nu</g> <td align="left"> changecom(,)&`#'957;changecom(`#') -<td width="8%"> m4tt svg_Xi</g> <td align="left"> changecom(,)&`#'926;changecom(`#') -<td width="8%"> m4tt svg_xi</g> <td align="left"> changecom(,)&`#'958;changecom(`#') -<td width="8%"> m4tt svg_Pi</g> <td align="left"> changecom(,)&`#'928;changecom(`#') -<td width="8%"> m4tt svg_pi</g> <td align="left"> changecom(,)&`#'960;changecom(`#') -<td width="8%"> m4tt svg_rho</g> <td align="left"> changecom(,)&`#'961;changecom(`#') -<td width="8%"> m4tt svg_Sigma</g> <td align="left"> changecom(,)&`#'931;changecom(`#') -<td width="8%"> m4tt svg_sigma</g> <td align="left"> changecom(,)&`#'963;changecom(`#') +<td width="10%"> m4tt svg_nu</g> <td align="left"> changecom(,)&`#'957;changecom(`#') +<td width="10%"> m4tt svg_Xi</g> <td align="left"> changecom(,)&`#'926;changecom(`#') +<td width="10%"> m4tt svg_xi</g> <td align="left"> changecom(,)&`#'958;changecom(`#') +<td width="10%"> m4tt svg_Pi</g> <td align="left"> changecom(,)&`#'928;changecom(`#') +<td width="10%"> m4tt svg_pi</g> <td align="left"> changecom(,)&`#'960;changecom(`#') +<td width="10%"> m4tt svg_rho</g> <td align="left"> changecom(,)&`#'961;changecom(`#') +<td width="10%"> m4tt svg_Sigma</g> <td align="left"> changecom(,)&`#'931;changecom(`#') +<td width="10%"> m4tt svg_sigma</g> <td align="left"> changecom(,)&`#'963;changecom(`#') +</tr> <tr> -<td width="8%"> m4tt svg_tau</g> <td align="left"> changecom(,)&`#'964;changecom(`#') +<td width="10%"> m4tt svg_tau</g> <td align="left"> changecom(,)&`#'964;changecom(`#') <td width="10%"> m4tt svg_upsilon</g> <td align="left"> changecom(,)&`#'965;changecom(`#') -<td width="8%"> m4tt svg_Phi</g> <td align="left"> changecom(,)&`#'934;changecom(`#') -<td width="8%"> m4tt svg_phi</g> <td align="left"> changecom(,)&`#'966;changecom(`#') -<td width="8%"> m4tt svg_chi</g> <td align="left"> changecom(,)&`#'967;changecom(`#') -<td width="8%"> m4tt svg_Psi</g> <td align="left"> changecom(,)&`#'936;changecom(`#') -<td width="8%"> m4tt svg_psi</g> <td align="left"> changecom(,)&`#'968;changecom(`#') -<td width="8%"> m4tt svg_Omega</g> <td align="left"> changecom(,)&`#'937;changecom(`#') +<td width="10%"> m4tt svg_Phi</g> <td align="left"> changecom(,)&`#'934;changecom(`#') +<td width="10%"> m4tt svg_phi</g> <td align="left"> changecom(,)&`#'966;changecom(`#') +<td width="10%"> m4tt svg_chi</g> <td align="left"> changecom(,)&`#'967;changecom(`#') +<td width="10%"> m4tt svg_Psi</g> <td align="left"> changecom(,)&`#'936;changecom(`#') +<td width="10%"> m4tt svg_psi</g> <td align="left"> changecom(,)&`#'968;changecom(`#') +<td width="10%"> m4tt svg_Omega</g> <td align="left"> changecom(,)&`#'937;changecom(`#') +</tr> <tr> -<td width="8%"> m4tt svg_omega</g> <td align="left"> changecom(,)&`#'969;changecom(`#') -<td width="8%"> m4tt svg_micro</g> <td align="left"> changecom(,)&`#'956;changecom(`#') -<td width="8%"> m4tt svg_ohm</g> <td align="left"> changecom(,)&`#'937;changecom(`#') -<td width="8%"> m4tt svg_lt</g> <td align="left"> changecom(,)&`#'60;changecom(`#') -<td width="8%"> m4tt svg_gt</g> <td align="left"> changecom(,)&`#'62;changecom(`#') -<td width="8%"> m4tt svg_leq</g> <td align="left"> changecom(,)&`#'8804;changecom(`#') -<td width="8%"> m4tt svg_geq</g> <td align="left"> changecom(,)&`#'8805;changecom(`#') -<td width="8%"> m4tt svg_prime</g> <td align="left"> changecom(,)&`#'8242;changecom(`#') +<td width="10%"> m4tt svg_omega</g> <td align="left"> changecom(,)&`#'969;changecom(`#') +<td width="10%"> m4tt svg_micro</g> <td align="left"> changecom(,)&`#'956;changecom(`#') +<td width="10%"> m4tt svg_ohm</g> <td align="left"> changecom(,)&`#'937;changecom(`#') +<td width="10%"> m4tt svg_lt</g> <td align="left"> changecom(,)&`#'60;changecom(`#') +<td width="10%"> m4tt svg_gt</g> <td align="left"> changecom(,)&`#'62;changecom(`#') +<td width="10%"> m4tt svg_leq</g> <td align="left"> changecom(,)&`#'8804;changecom(`#') +<td width="10%"> m4tt svg_geq</g> <td align="left"> changecom(,)&`#'8805;changecom(`#') +<td width="10%"> m4tt svg_prime</g> <td align="left"> changecom(,)&`#'8242;changecom(`#') +</tr> <tr> -<td width="8%"> m4tt svg_backsl</g> <td align="left"> changecom(,)&`#'92;changecom(`#') -<td width="8%"> m4tt svg_pound</g> <td align="left"> changecom(,)&`#'35;changecom(`#') -<td width="8%"> m4tt svg_comma</g> <td align="left"> changecom(,)&`#'44;changecom(`#') -<td width="8%"> m4tt svg_lparen</g> <td align="left"> changecom(,)&`#'40;changecom(`#') -<td width="8%"> m4tt svg_rparen</g> <td align="left"> changecom(,)&`#'41;changecom(`#') -<td width="8%"> m4tt svg_emsp</g> <td align="left"> |changecom(,)&`#'8195;changecom(`#')| -<td width="8%"> m4tt svg_ensp</g> <td align="left"> |changecom(,)&`#'8194;changecom(`#')| -<td width="8%"> m4tt svg_thinsp</g> <td align="left"> |changecom(,)&`#'8201;changecom(`#')| +<td width="10%"> m4tt svg_backsl</g> <td align="left"> changecom(,)&`#'92;changecom(`#') +<td width="10%"> m4tt svg_pound</g> <td align="left"> changecom(,)&`#'35;changecom(`#') +<td width="10%"> m4tt svg_comma</g> <td align="left"> changecom(,)&`#'44;changecom(`#') +<td width="10%"> m4tt svg_lparen</g> <td align="left"> changecom(,)&`#'40;changecom(`#') +<td width="10%"> m4tt svg_rparen</g> <td align="left"> changecom(,)&`#'41;changecom(`#') +<td width="10%"> m4tt svg_circ</g> <td align="left"> changecom(,)&`#'710;changecom(`#') +<td width="10%"> m4tt svg_deg</g> <td align="left"> changecom(,)&`#'176;changecom(`#') +<td width="10%"> m4tt svg_grave</g> <td align="left"> changecom(,)&`#'96;changecom(`#') +</tr> +</table> +<table cellpadding="2" cellspacing="0" width="75%" > <tr> -<td width="8%"> m4tt svg_circ</g> <td align="left"> |changecom(,)&`#'710;changecom(`#')| -<td width="8%"> m4tt svg_deg</g> <td align="left"> |changecom(,)&`#'176;changecom(`#')| +<td width="8%"> m4tt svg_emsp</g> <td width="50px" align="left"> |changecom(,)&`#'8195;changecom(`#')| +<td width="8%"> m4tt svg_ensp</g> <td width="50px" align="left"> |changecom(,)&`#'8194;changecom(`#')| +<td width="8%"> m4tt svg_thinsp</g> <td width="50px" align="left"> |changecom(,)&`#'8201;changecom(`#')| +</tr> </table> </ul> <li> Inkscape: It may be efficient to define elements by macro and to - place them using a WYSIWYG graphics editor. A draft page intended + place them using a wysiwyg graphics editor. A draft page intended for Inkscape is included. A reasonable variety of elements is defined - but should be customized for particular applications. + but many more could be added and they should be customized for + particular applications. Adjustments may also have to be made to + obtain the proper snap-to actions. <li> Link experiments: Click on the resistor or source of quickSVG to go to external files in new windows. Click on "n-port" in NportSVG to replace the diagram and then "back" to return. - <li> Some of the assumptions used to create this draft may be naive. Comments - are welcome. + <li> Some of the assumptions used to create this draft may be + na&`#'239;ve. + Comments are welcome. </ul> + <hr> cfig(XXXXX) +</td> +</tr> +</table> </BODY> </HTML> |