SVGで、以下のようなベクター形式で保存される、フリー(無料)のツールを探しています。
(以下HTMLより抜き出した部分のみ)
XML
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 200" overflow="visible" class="headerImg" width="100%" height="100%"> 2 <defs> 3 <g id="hogehoge"> 4 <path fill-rule="evenodd" clip-rule="evenodd" fill="#87B43F" d="M29.533,151.366c-2.418-6.739-5.544-13.162-9.087-19.356 5 c-6.894-12.058-9.604-25.08-9.14-38.808c0.351-10.348,2.779-20.217,7.991-29.267c2.985-5.186,7-9.401,12.202-12.427 6 7以下略 8 9
以下のような形式ではだめです。
XML
1<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="158 115.80473372781063 326 34" width="722" height="150"> 2 <defs> 3 <text id="hogehoge" x="200.32" y="195.12" font-size="12" font-family="Audiowide" font-weight="700" font-style="normal" letter-spacing="0" alignment-baseline="before-edge" transform="matrix(1 0 0 1 -45.31952662721892 -53.31360946745565)" style="line-height:100%" xml:space="preserve" dominant-baseline="text-before-edge"> 4 <tspan x="347.32" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge" text-anchor="start">ほげほげ 5 </tspan> 6 </text> 7 <style id="audiowide700normal"> 8 @font-face { 9 font-family: "Audiowide"; 10 font-weight: 700; 11 src: url("data:font/ttf;base64,AAEAAAARAQAABAAQR1BPU7aCM1sAALBIAABhikdTVUKmNsSVAAER1AAAAyBPUy8ya487mQAAAZgAAABgY21hcHYFTRAAAAe8AAAIpmN2dCAAKgAAAAAR3AAAAAJmcGdtBlmcNwAAEGQAAAFzZ2FzcAAXAAkAALA4AAAAEGdseWYz 12以下略 13 14
#この質問を定義した理由
Microsoft Edge/MSIE で表示デザインが崩れる為
HTMLサイズが巨大になりすぎるため。(HTMLサイズが4倍にも膨れ上がりました)
#やれれば良いこと
上のほうにあるSVGのフォーマットで、ベクターだけで出力され、フォント等のバイナリデータを埋め込まない事。
今回行なうのは透過画像での単色文字(白色)描画のみです。
#調査したこと
5種類程度のツールを試して、実際に出力した
知っていそうな人に聞いてみたがわからなかった
#その他
上に記載してあるSVGを記載した人は退職しており、連絡をつけることができません。
色の違うSVG画像が存在しますが、その部分をそのままにするので、影響ないと思われます。
以上、よろしくお願いします。
あなたの回答
tips
プレビュー