Google DriveのDrawing(図形描画)の画像をブログで使う

SVG を Google Drive の Drawings(図形描画)にインポートしたかったのは、Drawing がベクタ形式の画像だから。

ベクタ形式の画像はどんなに拡大しても画像が荒くならないという特徴がある。

どういうことかというと、

ウェブページの構成を変えたくなったとき、作った画像が大きすぎたり小さすぎたりしたら、画像編集ソフトウェアで適切な大きさに編集しなおすのは当然必要になってくる。

けれど、ベクタ形式の画像なら一度画像を作成してしまえば、画像を大きくしたり、逆に小さくしたりしなければならなくなっても、元の画像を作りなおす必要がなくて、ただ HTML の width と height を書き換えればそれで済んでしまう。

Drawings もベクタ形式なのだから、ウェブページに表示する表示する画像サイズを簡単に変えられるはず。

ということで、実際に試してみた。まずは、ウェブに公開。

1. 公開したい Drawings 画像を開く

2. 

   [ファイル] メニューから [ウェブに公開...] を選択
   → [ウェブに公開] 画面が開く

3. 

   [一般公開開始] をクリック
   → 確認画面が開く

4. 

   [OK] をクリック
   → [ウェブに公開] 画面が開く

これでウェブへの公開は完了。次に、埋め込み HTML コードと画像サイズの変更。

ウェブページに埋め込む HTML コードは [ウェブに公開] 画面の [埋め込みコード] の部分。これをコピー＆ペーストすればそのまま使える。

画像のサイズも変えてみたいので [ウェブページに公開] 画面の下のほうにある [画像サイズ] をいろいろ変更していたら [埋め込みコード] の "...pub?" の後が画像サイズに合わせて変化するのに気付いた。

[画像サイズ] には [小(50x50)]、[中(100x100)]、[大(150x150)] の 3 サイズしか用意されていないけれど、"...pub?" の後を書き換えれば自由に大きさを変えられるのでは。。。？早速ためしてみる。

下は、適当に作成した Drawings 画像の [埋め込みコード] に表示されている "...pub?" の後を、それぞれ "w=25&h=25"、"w=50&h=50"、"w=75&h=75"、"w=100&h=100"、"w=125&h=125" に書き換えて、実際に埋め込みコードを張り付けてみた結果。

期待どおり。