エクセルのグラフをSVG書き出しした後、HTMLにobjectタグで埋め込む場合は、viewBox指定を推奨します。レスポンシブWebに対応できます。
widthとheightをviewBoxに変更
エクセルから書き出したSVGグラフのコードを見てみます。
|
1 |
<svg width="1653" height="993" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"> |
デフォルトではsvgタグに「width=”1653″ height=”993″」と幅、高さが指定されています。
この指定があると、ブラウザの幅に応じて可変させるレスポンシブ対応は難しいです。
width、heightの代わりにviewBoxを設定します。
|
1 |
<svg viewBox="0 0 1653 993" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"> |
viewBoxの値は”x y 幅 高さ”となり、”0 0 1653 993″と指定しました。
レスポンシブWeb対応
書き換えたSVGをHTMLで表示してみます。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>エクセルSVGグラフ読み込み</title> </head> <body> <object data="img/data.svg" type="image/svg+xml"></object> </body> </html> |
objectタグとしてSVGを組み込んだ場合でも、レスポンシブ対応できます。
imgタグではなく、objectタグを使うメリットは、グラフ上の文字列を選択でき、コピペできることです。
ユーザーの使われ方によって、SVGをimgタグにするか、objectタグにするか、使い分けると良いでしょう。