web-dev-qa-db-ja.com

レスポンシブWebデザイン用にInkscape SVGファイルを準備するにはどうすればよいですか？

TreehouseのレスポンシブWebデザインに関するチュートリアルを行ってきました。チュートリアルのこの時点で、画像をsvgに変換して完全に応答性よくスケーリングできるようにするよう求められます。

私が所有していないAdobe Illustratorではなく、フリーウェアのInkscapeを使用しました。画像が変換されると、テキストエディターで画像を開き、svg宣言から高さと幅の要件を削除し、オブジェクトセレクターをスタイルCSSの最大幅ルールに追加するよう求められます。

  img, object {
max-width: 100%;
}

ただし、高さと幅を削除した後、画像は反応しなくなり、代わりに奇妙にクリップされます。

enter image description here

誰かが私がしたエラーを知っていますか？または、何を削除すべきでしたか？

以前に質問された場合、申し訳ありませんが見つかりません。

edit1、コード：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   width="319"
   height="177"
   sodipodi:docname="logo.gif">
  <metadata
     id="metadata2991">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs2989" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview2987"
     showgrid="false"
     inkscape:zoom="0.94984326"
     inkscape:cx="159.5"
     inkscape:cy="88.5"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2985" />
  <image
     width="319"
     height="177"
     xlink:href="

削除したのは、最初のSVGタグの「高さ」と「幅」です。

csssvgresponsive-designinkscape
22
user3009918

SVGにラスターイメージを配置しただけでは、実際に表示されているわけではありません。

つまり、SVGのスケーリングが適切に機能している場合（下記を参照）、ベクターアートワークを使用するメリットがわかりません。ベクターアートワークを拡大すると、ビットマップを拡大するときに得られる「ジャギー」（ブロックノイズ）が発生しません。 SVGにビットマップだけが含まれている場合、ビットマップを使用するのとほとんど同じです。

ここでの実際の問題は、Inkscapeが保存するSVGにviewBox属性を含まないことです。

「width」属性と「height」属性を削除すると、デフォルトで「100％」になります。これは、親コンテナーに合うようにSVGをスケーリングするようにブラウザーに指示します。残念ながら、このスケーリングが機能するためには、ブラウザーはSVGコンテンツのサイズを知る必要があります。それがviewBox属性の目的です。

IllustratorはviewBox属性を追加しますが、Inkscapeは追加しません。

意味を確認するには、幅と高さを削除した後、<svg>タグに次を追加します。

viewBox="0 0 319 177"

画像がクリップされていないことがわかり、ページのサイズが変更されるとサイズが変更されます。

17
Paul LeBeau

Inkscapeでは、ファイルを「最適化されたsvg」として保存した場合にビューボックスを有効にするオプションが提供されるようになりました。とても便利な！

34
qed

あなたができるように ここでそれを読んでください （そして完了のために qedの答え ）：

  1. エクスポートするオブジェクトを選択してください
  2. ドキュメントプロパティウィンドウを開きます（ Ctrl+Shift+D）
  3. 「ページのサイズを図面または選択範囲に合わせる」を選択します
  4. ファイル>コピーとして保存...
  5. 形式として[最適化されたSVG]を選択します
0
Barna Tekse

  • ラスターをベクターグラフィックスに「変換」している場合は、何か問題があります。 Inkscapeを使用していなかったとは言えませんが、少なくとも Wikipediaによると 変換を実行することはできません。

  • 何も変換していません。画像はGraphics Interchange Formatです！

「実際の」SVGファイルがどのように見えるかを確認するには、 wikiページの例 を開きます。

0
Okuma.Scott