JezK
Edit File: examplesDPVs.html
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--meta http-equiv="Content-Script-Type" content="text/javascript"--> <TITLE>SVG Examples: Circuit_macros Version 10.1</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> <!-- m4 macros: ------------------------------------------------------------ --------------------------------------------------------------------- --> <BODY> <table cellpadding="0" cellspacing="0" width="700px" border="0" align="center" ><tr><td> <H2>SVG Circuit_macros examples, Version 10.1</H2> <A HREF="../../index.html">Home</A> > <A HREF="examples.html">Examples</A> > <A HREF="examplesDPVs.html">dpv</A> <hr> <p> This file shows a few diagrams in .svg format produced without the use of LaTeX or equivalent. The diagrams have been adapted from the Circuit_macros examples in order to test the svg output of dpic. To generate the equivalent for all the examples, go to the examples/dpv directory and type "make". Typing "make examplesDPVs.html" produces the selection shown here. </p> <p> Generating svg line art is straightforward but formatting text is not because TeX, LaTeX, and related word processors do not produce svg directly. Either less-sophisticated text formatting must be employed for svg 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 --pdf</A> and <A HREF="https://github.com/dawbarton/pdf2svg">pdf2svg</A>. However, many circuit and similar diagrams intended for the web do not require sophisticated labels; the examples shown below might be representative. Compare them to those in <A HREF="examples.html" TARGET="_blank">examples.html</A> </p> <p> Click on the link to view the source of each diagram. </p> <hr> <p> There are other issues: <ul> <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> Diagrams such as these contain text labels that have to be treated differently from the LaTeX-compatible versions; for example, 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. <li> 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> <g style="font-family:monospace">svg_font(</g>font-face,nominal size[:dptextratio],textoffset, dpic commands<g style="font-family:monospace">)</g>: Change font face, size, textratio and dpic textoffset parameters. Change font face and dpic <g style="font-family:monospace">textht</g>, <g style="font-family:monospace">dptextratio</g>, and <g style="font-family:monospace">textoffset</g> parameters. If arg4 is blank, the font is changed and requires <g style="font-family:monospace">command "</g>"</g> to cancel the font change. <br> Note: Nominal height = text height in drawing units; actual height = nominal ht x <g style="font-family:monospace">dptextratio</g>. <br> Examples: <br> <g style="font-family:monospace">svg_font(Times)</g><br> <g style="font-family:monospace">svg_font(Times,14bp__)</g><br> <g style="font-family:monospace">svg_font(sans-serif,14bp__:0.71)</g><br> <g style="font-family:monospace">svg_font(Times,11bp__,1bp__,"text" at A)</g><br> <g style="font-family:monospace">svg_font(font-family="Times")</g><br> <g style="font-family:monospace">svg_font(font-family="Times" font-style="italic")</g><br> <g style="font-family:monospace">svg_font(style="font-family:Times; font-style:italic")</g> <li><g style="font-family:monospace"> svgfontratio(</g>font name<g style="font-family:monospace">)</g>; Reasonable <g style="font-family:monospace">dptextratio</g> value for common fonts, used by <g style="font-family:monospace">svg_font</g>. <li><g style="font-family:monospace"> svg_tspan(</g>text attributes, text<g style="font-family:monospace">)</g>; e.g. <g style="font-family:monospace">svg_tspan(font-style="italic" font-size="75%",XYZ)</g> <li><g style="font-family:monospace"> svg_it(</g>text<g style="font-family:monospace">)</g>: for italics <li><g style="font-family:monospace"> svg_tt(</g>text<g style="font-family:monospace">)</g>: for monospace (courier) <li><g style="font-family:monospace"> svg_sf(</g>text<g style="font-family:monospace">)</g>: sans-serif (Helvetica) <li><g style="font-family:monospace"> svg_norm(</g>text<g style="font-family:monospace">)</g>: for normal text <li><g style="font-family:monospace"> svg_bf(</g>text<g style="font-family:monospace">)</g>: for bold face <li><g style="font-family:monospace"> svg_small(</g>text, percent<g style="font-family:monospace">)</g>: to set a smaller text size, default 66 <li><g style="font-family:monospace"> svg_fsize(</g>text, percent<g style="font-family:monospace">)</g>: for setting larger or smaller text size, default 100 <li><g style="font-family:monospace"> svg_sub(</g>text, size percent, y displ, x displ<g style="font-family:monospace">)</g>: subscript <li><g style="font-family:monospace"> svg_ul(</g>text<g style="font-family:monospace">)</g>: underlined text <li><g style="font-family:monospace"> svg_ol(</g>text<g style="font-family:monospace">)</g>: overlined text <li><g style="font-family:monospace"> svg_sup(</g>text, size percent, y displ, x displ<g style="font-family:monospace">)</g>: superscript <li><g style="font-family:monospace"> svg_hat(</g>character<g style="font-family:monospace">)</g>: circumflex-accented character <li><g style="font-family:monospace"> svg_frac(</g>numerator[:wid], denominator[:wid]<g style="font-family:monospace">)</g>: basic fraction, wid in drawing units <li><g style="font-family:monospace"> svg_rot(</g>degrees, "text" [at position]<g style="font-family:monospace">)</g>: Rotate text degrees (default 90) ccw. Requires <g style="font-family:monospace">svg_rot_init(</g>filename<g style="font-family:monospace">)</g> and the source must be processed twice. <li><g style="font-family:monospace"> svg_rot_init(</g>filename<g style="font-family:monospace">)</g>: filename is the basename of the output of <g style="font-family:monospace">dpic -v filename.pic > filename.svg<g style="font-family:monospace"> <li><g style="font-family:monospace"> svg_symbol(</g>text<g style="font-family:monospace">)</g>: allow quoted pound sign in text, e.g., <g style="font-family:monospace">svg_symbol(10&`#'176;)</g> produces 10° <li><g style="font-family:monospace"> svgLink(</g>URL, drawing object, <g style="font-family:monospace">[B])</g>: link to external file using <a xlink:href=...>...</a> (default is <g style="font-family:monospace">target="_blank"</g> unless arg 3 = B) <li><g style="font-family:monospace"> svgLinkString</g> as above but for strings attached to objects <li> Greek and other symbols: <!-- 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="10%"> <g style="font-family:monospace"> svg_alpha</g> <td align="left"> α <td width="10%"> <g style="font-family:monospace"> svg_beta</g> <td align="left"> β <td width="10%"> <g style="font-family:monospace"> svg_Gamma</g> <td align="left"> Γ <td width="10%"> <g style="font-family:monospace"> svg_gamma</g> <td align="left"> γ <td width="10%"> <g style="font-family:monospace"> svg_Delta</g> <td align="left"> Δ <td width="10%"> <g style="font-family:monospace"> svg_delta</g> <td align="left"> δ <td width="10%"> <g style="font-family:monospace"> svg_epsilon</g> <td align="left"> ε <td width="10%"> <g style="font-family:monospace"> svg_zeta</g> <td align="left"> ζ </tr> <tr> <td width="10%"> <g style="font-family:monospace"> svg_eta</g> <td align="left"> η <td width="10%"> <g style="font-family:monospace"> svg_Theta</g> <td align="left"> Θ <td width="10%"> <g style="font-family:monospace"> svg_theta</g> <td align="left"> θ <td width="10%"> <g style="font-family:monospace"> svg_iota</g> <td align="left"> ι <td width="10%"> <g style="font-family:monospace"> svg_kappa</g> <td align="left"> κ <td width="10%"> <g style="font-family:monospace"> svg_Lambda</g> <td align="left"> Λ <td width="10%"> <g style="font-family:monospace"> svg_lambda</g> <td align="left"> λ <td width="10%"> <g style="font-family:monospace"> svg_mu</g> <td align="left"> μ </tr> <tr> <td width="10%"> <g style="font-family:monospace"> svg_nu</g> <td align="left"> ν <td width="10%"> <g style="font-family:monospace"> svg_Xi</g> <td align="left"> Ξ <td width="10%"> <g style="font-family:monospace"> svg_xi</g> <td align="left"> ξ <td width="10%"> <g style="font-family:monospace"> svg_Pi</g> <td align="left"> Π <td width="10%"> <g style="font-family:monospace"> svg_pi</g> <td align="left"> π <td width="10%"> <g style="font-family:monospace"> svg_rho</g> <td align="left"> ρ <td width="10%"> <g style="font-family:monospace"> svg_Sigma</g> <td align="left"> Σ <td width="10%"> <g style="font-family:monospace"> svg_sigma</g> <td align="left"> σ </tr> <tr> <td width="10%"> <g style="font-family:monospace"> svg_tau</g> <td align="left"> τ <td width="10%"> <g style="font-family:monospace"> svg_upsilon</g> <td align="left"> υ <td width="10%"> <g style="font-family:monospace"> svg_Phi</g> <td align="left"> Φ <td width="10%"> <g style="font-family:monospace"> svg_phi</g> <td align="left"> φ <td width="10%"> <g style="font-family:monospace"> svg_chi</g> <td align="left"> χ <td width="10%"> <g style="font-family:monospace"> svg_Psi</g> <td align="left"> Ψ <td width="10%"> <g style="font-family:monospace"> svg_psi</g> <td align="left"> ψ <td width="10%"> <g style="font-family:monospace"> svg_Omega</g> <td align="left"> Ω </tr> <tr> <td width="10%"> <g style="font-family:monospace"> svg_omega</g> <td align="left"> ω <td width="10%"> <g style="font-family:monospace"> svg_micro</g> <td align="left"> μ <td width="10%"> <g style="font-family:monospace"> svg_ohm</g> <td align="left"> Ω <td width="10%"> <g style="font-family:monospace"> svg_lt</g> <td align="left"> < <td width="10%"> <g style="font-family:monospace"> svg_gt</g> <td align="left"> > <td width="10%"> <g style="font-family:monospace"> svg_leq</g> <td align="left"> ≤ <td width="10%"> <g style="font-family:monospace"> svg_geq</g> <td align="left"> ≥ <td width="10%"> <g style="font-family:monospace"> svg_prime</g> <td align="left"> ′ </tr> <tr> <td width="10%"> <g style="font-family:monospace"> svg_backsl</g> <td align="left"> \ <td width="10%"> <g style="font-family:monospace"> svg_pound</g> <td align="left"> # <td width="10%"> <g style="font-family:monospace"> svg_comma</g> <td align="left"> , <td width="10%"> <g style="font-family:monospace"> svg_lparen</g> <td align="left"> ( <td width="10%"> <g style="font-family:monospace"> svg_rparen</g> <td align="left"> ) <td width="10%"> <g style="font-family:monospace"> svg_circ</g> <td align="left"> ˆ <td width="10%"> <g style="font-family:monospace"> svg_deg</g> <td align="left"> ° <td width="10%"> <g style="font-family:monospace"> svg_grave</g> <td align="left"> ` </tr> </table> <table cellpadding="2" cellspacing="0" width="75%" > <tr> <td width="8%"> <g style="font-family:monospace"> svg_emsp</g> <td width="50px" align="left"> | | <td width="8%"> <g style="font-family:monospace"> svg_ensp</g> <td width="50px" align="left"> | | <td width="8%"> <g style="font-family:monospace"> svg_thinsp</g> <td width="50px" align="left"> | | </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 for Inkscape is included. A reasonable variety of elements is defined 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 quickDPV to go to external files in new windows. Click on "n-port" in NportDPV to replace the diagram and then "back" to return. <li> Some of the assumptions used to create this draft may be naïve. Comments are welcome. </ul> <!-- <embed pluginspage="http://www.adobe.com/svg/viewer/install/" /> --> <hr> <table> <tr> <td width="50%"> <p> <IMG SRC="quickDPV.svg"> <br><br> Fig. 1 (<a href="quickDPV.txt" TYPE="text/plain" TARGET="_blank" alt="quickDPV">quickDPV.m4</a>): SVG produced by dpic   </p> </td> <td> <p> <IMG SRC="quick.svg"> <br><br> (<a href="quick.txt" TYPE="text/plain" TARGET="_blank" alt="quick">quick.m4</a>): SVG produced from quick.pdf by dvisvgm   </p> </td> </table> <hr> <p> <IMG SRC="ConnectorsDPV.svg"> <br><br> Fig. 2 (<a href="ConnectorsDPV.txt" TYPE="text/plain" TARGET="_blank" alt="ConnectorsDPV">ConnectorsDPV.m4</a>): Some integrated circuits and connectors with simple geometry and lists of labels   </p> <hr> <p> <IMG SRC="NportDPV.svg"> <br><br> Fig. 3 (<a href="NportDPV.txt" TYPE="text/plain" TARGET="_blank" alt="NportDPV">NportDPV.m4</a>): The <g style="font-family:monospace">nport</g> and <g style="font-family:monospace">nterm</g> macros   </p> <hr> <p> <IMG SRC="ex01DPV.svg"> <br><br> Fig. 4 (<a href="ex01DPV.txt" TYPE="text/plain" TARGET="_blank" alt="ex01DPV">ex01DPV.m4</a>): Two simple labeled circuits   </p> <hr> <p> <IMG SRC="CsourceDPV.svg"> <br><br> Fig. 5 (<a href="CsourceDPV.txt" TYPE="text/plain" TARGET="_blank" alt="CsourceDPV">CsourceDPV.m4</a>): Realization of a controlled source (illustrating stacked element labels)   </p> <hr> <p> <IMG SRC="HeathkitDPV.svg"> <br><br> Fig. 6 (<a href="HeathkitDPV.txt" TYPE="text/plain" TARGET="_blank" alt="HeathkitDPV">HeathkitDPV.m4</a>): The power supply of a Heathkit AR-15 (Now, <i>that</i> was a receiver!) with custom transformer and other elements, drawn on a grid (partially shown) to aid in placement   </p> <hr> <p> <IMG SRC="EEPDPV.svg"> <br><br> Fig. 7 (<a href="EEPDPV.txt" TYPE="text/plain" TARGET="_blank" alt="EEPDPV">EEPDPV.m4</a>): Part of a single-line diagram of a power distribution system using draft elements   </p> <hr> <p> <IMG SRC="controlDPV.svg"> <br><br> Fig. 8 (<a href="controlDPV.txt" TYPE="text/plain" TARGET="_blank" alt="controlDPV">controlDPV.m4</a>): Control-system block diagrams   </p> <hr> <p> <IMG SRC="ByteDPV.svg"> <br><br> Fig. 9 (<a href="ByteDPV.txt" TYPE="text/plain" TARGET="_blank" alt="ByteDPV">ByteDPV.m4</a>): Elementary splines   </p> <hr> <p> <IMG SRC="FlowDPV.svg"> <br><br> Fig. 10 (<a href="FlowDPV.txt" TYPE="text/plain" TARGET="_blank" alt="FlowDPV">FlowDPV.m4</a>): A flowchart sampler   </p> <hr> <!-- <p> More flow-chart examples? Try <a href="https://buraphakit.sourceforge.io/EFI/EFI_2019_S2_W13.shtml" TARGET="_blank">here.</a> </p> --> <p> <IMG SRC="paletteDPV.svg"> <br><br> Fig. 11 (<a href="paletteDPV.txt" TYPE="text/plain" TARGET="_blank" alt="paletteDPV">paletteDPV.m4</a>): A draft palette of a few elements for Inkscape using a 1 mm grid   </p> <hr> <p> <IMG SRC="FontsDPV.svg"> </p> <hr> </td> </tr> </table> </BODY> </HTML>