Geekly Articles each Day

SVGを使用して図をスケッチする

はじめに


この記事では、 Altium 、 Orcad 'a、またはVisioがなく、 Draw.ioが突然壊れた場合に、12個の要素の簡単な小さな図をスケッチする方法について説明します。

これはまったく難しいことではありません。最新のブラウザーはSVGマークアップ言語をサポートしており、通常のテキストエディターで簡単にすばやくタイプの小さな図を描くことができます。

低電力ステップアップコンバーターのスケッチ


次に、描画プロセスと、これに役立ついくつかの微妙な点について説明します。 自動トレース、マウス、およびその他のWYSIWYGのオームを使用して、特別なアプリケーションで大きな図を作成する方がはるかに簡単であることをもう一度強調します。
記事を読むときは、 パットを介して編集するためのナノがあり、編集結果を携帯電話で表示できることを、爆弾湾の牛に提示することをお勧めします。

スケッチ


通常、スケッチには要素/ブロックとそれらの間のリンクが含まれており、拡張子.svgを持つ個別のテキストファイルとして作成するか、Webページのコードに直接埋め込むことができます。

図を描くとき、​​特定の手順を使用すると便利です。

  1. 使用済みの要素を作成（またはコピー）します。たとえば

    水平ショットキーダイオード
    <defs> ... <g width="30" height="10" id="schottky"> <path style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h10 v-5 l10,5 l-10,5 v-5 m7,-4 v-2 h3 v12 h3 v-2 m-3,-4 h10" /> </g> ... </defs>


    または

    垂直抵抗
     <defs> ... <g width="30" height="10" id="resistor"> <path transform="translate(1,0) rotate(90,15,5)" style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h3 l2,-3 l4,6 l4,-6 l4,6 l4,-6 l4,6 l2,-3 h3" /> </g> ... </defs>


    要素が別の場所からコピーされている場合、すでにこのステップでサイズを統一する価値があります。 座標を直接編集する代わりに、変換（ translate 、 rotate 、 scaleなど）を使用する方が簡単です。

    要素定義はdefsタグ内にあるため、まだ表示されていないことに注意してください。 各要素定義には一意のidが必要です。これは次のステップで必要になります。

  2. ダイアグラム上の要素を配置し、署名します。 これを行うには、 useタグのグループを使用して、要素と署名用の1つ以上のtextタグを描画します。

    例
     ... <g transform="translate(115,45)"><use xlink:href="#resistor"/><text x="20" font-size="10">R1</text><text x="20" y="10" font-size="8">470k</text></g> ...


    要素ごとに1行を使用すると、かなり明確な表が取得されます。 グループ内の署名の座標は相対的であるため、署名された要素を移動するには、グループの座標を変更するだけで十分です。

  3. 接続を描画します。 このため、 pathタグを使用すると便利です。これにより、水平線と垂直線を簡単に描画できます。

    主に次のコマンドが使用されます。

    • M10,5ポイント10.5から描画を開始
    • h10水平線、10ピクセル右
    • m30,0ピクセル右にジャンプ
    • v15縦線、15ピクセル下
    • m0,30ピクセル下にジャンプ
    • l-5,-10斜めの線、左に5ピクセル、上に10ピクセル

  4. i接続上の線にドットを付けます。 要素の配置と違いはありませんが、すべての接続が既に描画された後にこれを行うことをお勧めします。

  5. 味に可愛さを加えます。

簡単な図のコードと画像

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!--   --> <defs> <circle x="0.5" y="0.5" r="1.5" style="fill:blue;stroke:blue;" id="junction"/> <g width="30" height="10" id="connector"> <path style="fill:none;stroke:black;stroke-width:1" d="M10.5,5.5 a3,3,0,0,1,-6,0 a3,3,0,0,1,6,0 h20" /> </g> <g width="30" height="10" id="resistor"> <path transform="translate(1,0) rotate(90,15,5)" style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h3 l2,-3 l4,6 l4,-6 l4,6 l4,-6 l4,6 l2,-3 h3" /> </g> </defs> <!--   --> <g transform="translate(5, 10)"><use xlink:href="#connector"/><text x="20" font-size="10">+</text> </g> <g transform="translate(25,40)"><use xlink:href="#resistor"/> <text x="-5" y="10" font-size="10">R1</text></g> <g transform="translate(5, 70)"><use xlink:href="#connector"/><text x="20" font-size="10">-</text> </g> <!--  --> <path d="M35.5,15.5 h5 v15 m0,30 v15 h-5" stroke="red" fill="none"/> <path d="M40.5,15.5 h25 v60 h-25" stroke="red" fill="none"/> <!--  --> <use xlink:href="#junction" transform="translate(40,15)"/> <use xlink:href="#junction" transform="translate(40,75)"/> <!--  --> <text x="50" y="88" width="100" text-anchor="middle" font-family="cursive" font-size="10"></text> <text x="50" y="98" width="100" text-anchor="middle" font-family="monospace" font-size="10"></text> </svg>

記事の最初からのスキーマコード
 <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Step-up DC-DC converter</desc> <defs> <circle x="0.5" y="0.5" r="1.5" style="fill:blue;stroke:blue;" id="junction"/> <g width="30" height="10" id="connector"> <path style="fill:none;stroke:black;stroke-width:1" d="M10.5,5.5 a3,3,0,0,1,-6,0 a3,3,0,0,1,6,0 h20" /> </g> <g width="30" height="10" id="connector180"> <path transform="translate(1,1) rotate(180,15,5)" style="fill:none;stroke:black;stroke-width:1" d="M10.5,5.5 a3,3,0,0,1,-6,0 a3,3,0,0,1,6,0 h20" /> </g> <g width="30" height="10" id="resistor"> <path transform="translate(1,0) rotate(90,15,5)" style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h3 l2,-3 l4,6 l4,-6 l4,6 l4,-6 l4,6 l2,-3 h3" /> </g> <g width="30" height="10" id="capacitor"> <path transform="translate(1,0) rotate(90,15,5)" style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h13 m0,-7 v14 m4,0 v-14 m0,7 h13" /> </g> <g width="30" height="10" id="inductance"> <path style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h0.7 a5,10,0,0,1,9.3,5 a5,10,0,0,1,10,0 a5,10,0,0,1,9.3,-5 h0.7" /> </g> <g width="30" height="10" id="schottky"> <path style="fill:none;stroke:black;stroke-width:1" d="M0.5,5.5 h10 v-5 l10,5 l-10,5 v-5 m7,-4 v-2 h3 v12 h3 v-2 m-3,-4 h10" /> </g> <g width="40" height="40" id="stepup"> <rect x="0.5" y="0.5" width="40" height="40" style="fill:none;stroke:black;stroke-width:1px;"/> <text x="2" y="10" font-size="8">VIN</text> <text x="2" y="37" font-size="8">GND</text> <text x="25" y="10" font-size="8">SW</text> <text x="27" y="37" font-size="8">FB</text> </g> </defs> <g transform="translate(0,15)"><use xlink:href="#connector"/><text x="5" y="-5" font-size="10">+Vin</text></g> <g transform="translate(0,135)"><use xlink:href="#connector"/><text x="5" y="-5" font-size="10">Gnd</text></g> <g transform="translate(160,15)"><use xlink:href="#connector180"/><text y="-5" font-size="10">+Vout</text></g> <g transform="translate(160,135)"><use xlink:href="#connector180"/><text y="-5" font-size="10">Gnd</text></g> <g transform="translate(65,50)"><use xlink:href="#stepup"/><text y="55" font-size="10">SX1308</text></g> <g transform="translate(115,45)"><use xlink:href="#resistor"/><text x="20" font-size="10">R1</text></g> <g transform="translate(115,110)"><use xlink:href="#resistor"/><text x="20" font-size="10">R2</text></g> <g transform="translate(20,75)"><use xlink:href="#capacitor"/><text x="20" font-size="10">C1</text></g> <g transform="translate(140,75)"><use xlink:href="#capacitor"/><text x="20" font-size="10">C2</text></g> <g transform="translate(50,15)"><use xlink:href="#inductance"/><text x="10" y="-5" font-size="10">L1</text></g> <g transform="translate(95,15)"><use xlink:href="#schottky"/><text x="10" y="-5" font-size="10">D1</text></g> <path d="M30.5,20.5 h20 m30,0 h15 m30,0 h35" stroke="red" fill="none"/> <path d="M35.5,20.5 v45 m0,30 v45" stroke="red" fill="none"/> <path d="M130.5,20.5 v15 m0,30 v35 m0,30 v10" stroke="red" fill="none"/> <path d="M155.5,20.5 v45 m0,30 v45" stroke="red" fill="none"/> <path d="M45.5,20.5 v35 h20" stroke="red" fill="none"/> <path d="M50.5,140.5 v-55 h15" stroke="red" fill="none"/> <path d="M90.5,20.5 v20 h25 v15 h-10" stroke="red" fill="none"/> <path d="M105.5,85.5 h25" stroke="red" fill="none"/> <path d="M30.5,140.5 h130" stroke="red" fill="none"/> <use xlink:href="#junction" transform="translate(35,20)"/> <use xlink:href="#junction" transform="translate(45,20)"/> <use xlink:href="#junction" transform="translate(90,20)"/> <use xlink:href="#junction" transform="translate(130,20)"/> <use xlink:href="#junction" transform="translate(155,20)"/> <use xlink:href="#junction" transform="translate(130,85)"/> <use xlink:href="#junction" transform="translate(35,140)"/> <use xlink:href="#junction" transform="translate(50,140)"/> <use xlink:href="#junction" transform="translate(130,140)"/> <use xlink:href="#junction" transform="translate(155,140)"/> </svg>


描画の微妙さ


一般に、SVGでの描画は非常に簡単です。 以下はあまり明確ではありませんが、少し時間を節約できます。

線がぼやける理由



SVGは、線を描くときにサブピクセル精度を使用します。 したがって、奇数ピクセル数の太さの線の場合、始点と終点の座標はピクセルの中央に配置する必要があります。 相対座標のみが描画に使用された場合、開始点の座標を0.5.0.5だけシフトできます。 普遍的なソリューションはtranslate(0.5,0.5)です。

円または円弧


円を描くには、 circleタグを使用するか、 pathタグのコマンド（Arc-arcから）を使用しpath 。 選択肢がある場合は、 circle使用します。

円弧を使用して円を描画する唯一の言い訳は、1つのタグパスを持つ円を含む要素を描画する場合です。 このためには、2つの連続した円弧が必要です。その直径。

他のファイルのアイテムを使用する


非常にシンプル- <use xlink:href="library.svg#connector"/>代わりに<use xlink:href="#connector"/> <use xlink:href="library.svg#connector"/>ます。

個別のファイルまたはHTMLコードに埋め込まれた


別のファイルの方がはるかに便利ですが、


要素の画像を取得する場所


自分で描くか検索する
グーグルで
www.google.nl/search?q=svg+library+of+electronic+components
www.google.nl/search?q=svg+clipart+library

この場合、ライブラリから適切なものを選択するよりも自分で速く描画することが判明する場合があります。 自分のために、私は私の収集を始めました
図書館
vorot.imtqy.com/lib.svg

.svgから.pdf、.png、.jpgなどを取得する方法


最も簡単な方法は、.svgをEdgeで開き、画像を.pngとして保存することです。 ブラウザでこれが許可されていない場合は、.svgをPDFプリンターに印刷するか、PrintScreenを使用できます。

CloudConvertのようなオンラインサービスもたくさんあります。 残念ながら、すべてのサービスが透明度や標準外のフォントを正しく処理するわけではありません。

Source: https://habr.com/ru/post/J320504/

More articles:


All Articles