【スポンサーリンク】

Inkscapeでエクスポートしたsvgが表示されない?(viewBoxの異常値)

Inkscapeでエクスポートしたsvgが表示されない?(viewBoxの異常値)
  • InkscapeでエクスポートしたSVGファイルの表示されない場合、viewBoxの値や transformの設定がおかしいのかもしれません。
  • 「ドキュメントのプロパティ」でページサイズを適切に設定してから、エクスポートし直すと正しい SVGファイルになります。
特典ダウンロード
【ちいラボ読者特典】印刷してすぐ使える!
\記事が役に立ったらシェアしてね/
【スポンサーリンク】

1. エクスポートしたsvgが表示されない?

InkscapeでエクスポートしたSVGが表示されないことがあります。
何が原因ですか?

エクスポートしたsvgが表示されない?

問題のSVGファイルのXMLを見ると、viewBoxやtranslate の値が異常に大きな値になっていました。

viewBox="0 0 341227.19 345126.41"
transform="translate(-40505.039,-39739.68)"
エクスポートしたsvgが表示されない?
SVGのXML

SVG(Scalable Vector Graphics)」は、ベクターグラフィックス形式がXMLで書かれています。
そのため、テキストエディタで開いて中身を確認できます。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- 図形の定義 -->
  <rect x="0" y="0" width="100" height="100"/>
  <circle cx="50" cy="50" r="40"/>
  <!-- その他の要素 -->
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   viewBox="0 0 337350 341062.75"
   version="1.1"
   id="svg2"
   width="337350"
   height="341062.75"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2">
    <linearGradient
       id="linear-gradient"
       x1="325"
       y1="581"
       x2="325"
       y2="69"
       gradientUnits="userSpaceOnUse">
      <stop
         offset="0"
         stop-color="#2274bb"
         id="stop1" />
      <stop
         offset="1"
         stop-color="#05bbee"
         id="stop2" />
    </linearGradient>
  </defs>
  <title
     id="title2">IOS7_App_Icon_Grid</title>
  <g
     id="Grid_App_Icon"
     data-name="Grid App Icon"
     transform="translate(-42575,-42299.148)">
    <rect
       id="back"
       x="69"
       y="69"
       width="512"
       height="512"
       rx="122.18"
       ry="122.18"
       fill="url(#linear-gradient)"
       style="fill:url(#linear-gradient)" />
    <path
       d="M 582.58,458 V 325.73 H 583 v -1.46 h -0.42 V 192 a 124.94,124.94 0 0 0 -35.2,-86.9 v -2.4 h 35.2 v -1.47 H 548.4 l 32.82,-33 -1,-1 -32.81,33 V 67.94 h -1.46 v 33.29 h -2.48 A 123.51,123.51 0 0 0 458.2,67 H 191.37 a 123.51,123.51 0 0 0 -85.23,34.23 h -2.49 V 67.94 h -1.45 v 32.26 l -32.81,-33 -1,1 32.81,33 H 69.08 v 1.46 h 33.12 v 2.44 A 124.91,124.91 0 0 0 67,192 v 266 a 124.91,124.91 0 0 0 35.2,86.9 v 2.44 H 69.08 v 1.46 h 32.09 l -32.81,33 1,1 32.81,-33 v 32.26 h 1.45 v -33.29 h 2.49 A 123.51,123.51 0 0 0 191.37,583 H 458.2 a 123.51,123.51 0 0 0 85.24,-34.23 h 2.48 v 33.29 h 1.46 V 549.8 l 32.81,33 1,-1 -32.82,-33 H 583 v -1.46 h -35.62 v -2.44 a 125,125 0 0 0 35.2,-86.9 z m -1.46,0 a 123.41,123.41 0 0 1 -33.74,84.78 V 417.45 H 580.6 V 416 h -33.22 v -90.27 h 33.74 z m -164.79,-42 -1,-1 q 2.49,-2.53 4.83,-5.2 v 6.2 z m 3.83,1.46 v 2.39 l -2.38,-2.39 z M 230.25,416 v -5.25 c 1.3,1.45 2.64,2.86 4,4.25 l -1,1 z m 1.55,1.46 -1.55,1.54 v -1.55 z m 1.45,-183.46 1,1 c -1.36,1.39 -2.7,2.81 -4,4.25 V 234 Z m -3,-1.46 V 231 l 1.55,1.55 z M 420.16,234 v 6.2 q -2.34,-2.67 -4.83,-5.2 l 1,-1 z m -2.38,-1.46 2.38,-2.39 v 2.39 z m 2.38,91.72 h -3.42 a 92.44,92.44 0 0 0 -26.42,-64.12 l 24,-24.1 q 3,3.07 5.86,6.37 z m 1.45,-80.12 a 126.35,126.35 0 0 1 29,80.12 h -29 z m -32.32,17 a 90.88,90.88 0 0 1 26,63.08 h -88.75 z m -63.77,62 V 234 a 89.92,89.92 0 0 1 62.74,26.12 z m -1.46,0 -62.75,-63.09 A 90,90 0 0 1 324.06,234 Z m -1,1 h -88.77 a 90.93,90.93 0 0 1 26,-63.08 z m 0,1.46 -62.75,63.08 a 90.93,90.93 0 0 1 -26,-63.08 z m 1,1 V 416 a 89.93,89.93 0 0 1 -62.75,-26.13 z m 1.46,0 62.74,63.08 A 89.89,89.89 0 0 1 325.52,416 Z m 1,-1 h 88.74 a 90.88,90.88 0 0 1 -26,63.08 z m 86.75,-90.6 -24,24.11 A 91.54,91.54 0 0 0 341,234 h 71.25 z m -87.75,-2.46 v -34.07 a 125.07,125.07 0 0 1 85.2,34.08 z m -1.46,0 h -85.2 a 125,125 0 0 1 85.2,-34.08 z M 308.57,234 a 91.61,91.61 0 0 0 -48.29,25.11 l -24,-24.11 1,-1 z m -73.29,2 24,24.1 a 92.35,92.35 0 0 0 -26.42,64.12 h -2.59 v -82.76 c 1.61,-1.85 3.28,-3.66 5.01,-5.41 z m -6.48,88.22 h -29.87 a 126.35,126.35 0 0 1 29.87,-81.11 z m 0,1.46 v 81.11 a 126.35,126.35 0 0 1 -29.87,-81.11 z m 1.45,0 h 2.59 a 92.31,92.31 0 0 0 26.42,64.11 l -24,24.11 c -1.73,-1.75 -3.4,-3.56 -5,-5.41 z m 6.06,89.32 24,-24.11 A 91.61,91.61 0 0 0 308.57,416 h -71.24 z m 87.75,2.46 v 34.08 a 125,125 0 0 1 -85.2,-34.08 z m 1.46,0 h 85.2 a 125.07,125.07 0 0 1 -85.2,34.08 z M 341,416 a 91.54,91.54 0 0 0 48.29,-25.11 l 24,24.11 -1,1 z m 73.3,-2 -24,-24.11 a 92.39,92.39 0 0 0 26.42,-64.11 h 3.42 v 81.85 q -2.8,3.24 -5.84,6.37 z m 7.31,-88.22 h 29 a 126.35,126.35 0 0 1 -29,80.12 z m 30.49,-1.46 A 127.81,127.81 0 0 0 421.61,241.94 V 234 h 76.9 a 196.83,196.83 0 0 1 22.13,90.26 z M 421.61,232.6 v -3.86 l 42.18,-42.39 a 197.46,197.46 0 0 1 33.95,46.25 z m 0,-5.92 v -72.86 a 196.59,196.59 0 0 1 41.15,31.44 z m -1.45,1.46 -4.43,4.46 h -2.89 A 126.53,126.53 0 0 0 325.52,197 V 128.12 A 194.06,194.06 0 0 1 420.16,153 Z M 324.06,197 a 126.51,126.51 0 0 0 -87.32,35.54 h -2.89 l -3.6,-3.62 v -76.4 a 194.09,194.09 0 0 1 93.81,-24.41 z m -95.26,30.47 -42,-42.21 a 196.81,196.81 0 0 1 42,-31.91 z m 0,2.07 v 3 h -77 a 197.18,197.18 0 0 1 33.95,-46.25 z m 0,4.47 v 6.9 a 127.87,127.87 0 0 0 -31.33,83.36 H 128.94 A 196.83,196.83 0 0 1 151.07,234 Z m -31.33,91.72 a 127.87,127.87 0 0 0 31.33,83.36 V 416 h -77.73 a 196.83,196.83 0 0 1 -22.13,-90.26 z m 31.33,91.72 v 3 l -43,43.23 a 197.18,197.18 0 0 1 -33.95,-46.25 z m 0,5.08 v 74.12 a 196.81,196.81 0 0 1 -42,-31.91 z m 1.45,-1.46 3.6,-3.62 h 2.89 A 126.51,126.51 0 0 0 324.06,453 v 68.9 A 194.21,194.21 0 0 1 230.25,497.48 Z M 325.52,453 a 126.53,126.53 0 0 0 87.32,-35.54 h 2.89 l 4.43,4.46 V 497 a 194.18,194.18 0 0 1 -94.64,24.89 z m 96.09,-29.62 41.15,41.37 a 197.19,197.19 0 0 1 -41.15,31.44 z m 0,-2.06 v -3.86 h 76.13 a 197.46,197.46 0 0 1 -33.95,46.25 z m 0,-5.32 v -7.88 a 127.81,127.81 0 0 0 30.49,-82.38 h 68.54 A 196.83,196.83 0 0 1 498.51,416 Z m 100.48,-90.26 h 23.83 V 416 h -45.77 a 198.3,198.3 0 0 0 21.94,-90.27 z m 0,-1.46 A 198.3,198.3 0 0 0 500.15,234 h 45.77 v 90.26 z M 499.38,232.56 A 199.21,199.21 0 0 0 464.82,185.27 L 545,104.7 l 0.07,0.06 c 0.3,0.31 0.6,0.64 0.9,1 v 126.79 z m 44.52,-128.87 -80.11,80.54 a 198.22,198.22 0 0 0 -42.18,-32.09 v -49.45 h 121.25 z m -123.74,47.64 a 195.65,195.65 0 0 0 -94.64,-24.68 v -24 h 94.64 z m -94.64,-50.1 V 68.46 h 94.64 v 32.77 z m -1.46,0 H 230.25 V 68.46 h 93.81 z m 0,1.46 v 24 a 195.63,195.63 0 0 0 -93.81,24.21 v -48.21 z m -95.26,49 a 197.85,197.85 0 0 0 -43,32.55 l -80.11,-80.54 1,-1 H 228.8 Z m -124.24,-46.93 0.06,-0.06 80.14,80.56 a 199,199 0 0 0 -34.57,47.29 H 103.65 V 105.72 c 0.35,-0.32 0.6,-0.65 0.91,-0.96 z M 149.43,234 a 198.3,198.3 0 0 0 -21.94,90.26 H 103.65 V 234 Z m -21.94,91.72 A 198.3,198.3 0 0 0 149.43,416 h -45.78 v -90.27 z m 22.7,91.72 a 199,199 0 0 0 34.57,47.29 l -80.14,80.57 -0.06,-0.06 c -0.31,-0.31 -0.6,-0.64 -0.91,-1 V 417.45 Z m -44.51,128.87 80.11,-80.54 a 198.21,198.21 0 0 0 43,32.56 v 49 H 106.72 Z m 124.57,-47.17 a 195.63,195.63 0 0 0 93.81,24.21 v 24 h -93.81 z m 93.81,49.63 v 32.77 h -93.81 v -32.77 z m 1.46,0 h 94.64 v 32.77 h -94.64 z m 0,-1.46 v -24 a 195.65,195.65 0 0 0 94.64,-24.68 v 48.64 z m 96.09,-49.45 a 198.22,198.22 0 0 0 42.18,-32.09 l 80.11,80.54 -1,1 H 421.61 Z M 545,545.24 544.93,545.3 464.8,464.74 a 199.21,199.21 0 0 0 34.56,-47.29 H 545.9 V 544.28 Z M 581.12,192 V 324.27 H 547.38 V 234 h 33.22 v -1.46 H 547.38 V 107.25 A 123.41,123.41 0 0 1 581.12,192 Z M 541.34,101.2 H 421.61 V 68.46 h 36.59 a 122.08,122.08 0 0 1 83.14,32.77 z m -350,-32.77 H 228.8 V 101.2 H 108.24 A 122.07,122.07 0 0 1 191.37,68.46 Z M 68.45,458 V 192 a 123.42,123.42 0 0 1 33.75,-84.78 v 125.3 H 69 V 234 h 33.2 v 90.26 H 68.88 v 1.46 H 102.2 V 416 H 69 v 1.46 h 33.2 v 125.3 A 123.42,123.42 0 0 1 68.45,458 Z m 39.79,90.8 H 228.8 v 32.77 h -37.43 a 122.07,122.07 0 0 1 -83.13,-32.8 z m 350,32.77 h -36.63 v -32.8 h 119.73 a 122.1,122.1 0 0 1 -83.14,32.77 z"
       fill="#8cd6f1"
       id="path2"
       style="stroke:#dfdfdf;stroke-width:3;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

2. 正しいエクスポート方法

このような大きな値や不適切な transform が含まれたのは、原点とキャンバスサイズの問題です。

Inkscapeは内部的に大きなキャンバス空間を持っています。
アイコングリッドが中央付近に配置されていますが、Inkscapeの内部座標系では大きなオフセット値として解釈されてしまったようなのです。

解決策は、適切なページサイズに設定すること。

正しいエクスポート方法
  • メニューから「ファイル」→「ドキュメントのプロパティ」を開き、「ページサイズをコンテンツに合わせて変更」します。
    (サイズの単位は「px」)。
  • あとは、「Plain SVG」を選択してエクスポートします。
    必要に応じて「選択中のもののみエクスポート」オプションを使います。
正しいエクスポート方法

より適切なサイズと座標値を持つSVGファイルが生成されるはずです。

3. svgデータを修復するには?

svgデータを修復するには?

エクスポート済みのデータはどうやって修正するの?

Inkscapeで編集時に「ページサイズを選択オブジェクトに合わせる」と、ちゃんとSVGを修正できました。

svgデータを修復するには?
あるいは、

SVGコードはXMLファイルなので、テキストエディタで直接編集することもできます。

  • viewBoxを適切なサイズに設定
    (例:viewBox="0 0 512 512"
  • 不要な transform を削除する
こちらもどうぞ。
InkscapeのmacOS用インストーラが探しにくかった(検索結果の古い版)
InkscapeのmacOS用インストーラが探しにくかった(検索結果の古い版)
Googleで「inkscape mac」で検索したら、最新版のパッケージが見つけにくかったのでメモしています。検索エンジンを鵜呑みにしてはダメなんですね。MacでInkscapeを使い方スライドやアイキャッチ画像のデザインで、「袋文字」を使いたいと思いました。今は、KeynoteやPowerPoint、あるいはCanvaで作成しています。「袋文字」を作るには同じ文字を重ねて配置し、段階的に枠線の太くしています。しかし、文章内容を修正するときに、いちいち大変です。そこで別の方...

[mac]画像ファイルをプレビューで回転したのに GIMPで開くと元の向きに戻っている?
[mac]画像ファイルをプレビューで回転したのに GIMPで開くと元の向きに戻っている?
「プレビュー」の画像の回転は、画像ファイルのデータ自体を回転処理しているわけではないのかな?GIMPに限らず、他のプログラムで画像ファイルを開くと、向きが変わっていないことがあります。Macのプレビューでの回転が反映されるか?GIMP…×Google Chrome … ×Safari … ○Keynote … ○GIMPのメニュー「画像」ー「変形」ー「180度回転」を選択して、上書きエクスポートすると、画像ファイルのデータ自体が変更されます。こちらもどうぞ。

シンプルでフリーなプロフィールアイコン
シンプルでフリーなプロフィールアイコン
SNSの画面を説明するときに個人情報などを隠す必要があります。そのために、シンプルでフリーなプロフィールアイコンを探していました。これまでは、モザイクやぼかしにしたり、デフォルトアイコンに置き換えたりしていたのですが、たくさんの人が参加するSNSのイメージとずれてしまうのが悩みでした。そこで見つけたのは、coffeebeanworkstさんが、Pixabayで公開しているイラストです。このようなフラットなプロフィール画像がたくさん公開されています。KeynoteとGIMPで画...
QRコードを読み込むと、関連記事を確認できます。

Inkscapeでエクスポートしたsvgが表示されない?(viewBoxの異常値)
【スポンサーリンク】
タイトルとURLをコピーしました