17

免責事項

タイトルの不条理を考えると、これはトロールのように聞こえることを私は理解しています。しかし、それは本物の質問です。私の経歴には、OpenGL/x86アセンブリが含まれます。私は最近ウェブプログラミングを学び始めました。私はSVG+CSSが本当に好きで、疑問に思っていました。なぜ人々はSVGでWebページ全体をデザインしないのでしょうか。

コンテクスト

  • SVGは、美しいプリミティブを提供します。2次+3次ベジェ曲線。行+塗りつぶし-すべてベクターグラフィックとして
  • SVGはテキストを提供します
  • SVGはアフィン変換を提供します

質問

  • Webサイト全体を巨大なSVGファイルとして設計している人の例はありますか？
  • そうでない場合、どのような制限がありますか？
  • div / tableではなくSVGプリミティブを使用すると、パフォーマンスが低下しますか？
4

5 に答える 5

10

可能です; たとえば、ハイパーリンクなどを取得するために、HTMLフラグメントをSVGドキュメントに埋め込むことができます。

ただし、少なくとも現時点では、いくつかの重大な欠点があります。

  • 現在のWebブラウザーは、SVGを画像として扱い、ユーザーに優れたUIとして表示されない場合があります。たとえば、FirefoxではユーザーがSVGファイル内のテキストを選択することはできないと思います。
  • コンテンツとプレゼンテーションの分離が失われます。SVGはCSSを使用しており、手動で編集すれば原則として分離を維持できますが、おそらくコンテンツと一緒にレイアウトを設計しているはずです。これにはいくつかの欠点があります。
    • 当然の結果として、結果のページを他の形式に適合させることは困難です。特に：
    • テキストサイズを変更した場合の動作はどうなりますか？ドキュメントが印刷されますか？ウィンドウのサイズが変更されますか？リフローを適切にサポートする複雑な図面を設計することは困難です（図面が複雑でない場合は、HTML + CSSを使用することもできます）。
    • スクリーンリーダーのサポート：順序が明確でないため（以下）、スクリーンリーダーは理解できないスクランブル出力を提供する場合があります。より基本的には、スクリーンリーダーは、SVGが画像であると想定し、テキストを読み込もうとしない場合があります。
  • SVGはXMLのみに基づいているため、ルールをかなり厳密に順守する必要があります。（X）HTMLでは、プレーンHTMLシリアル化を使用するオプションがあります。次に、これらのルールの多くが緩和され、偽の入力をフィードした場合（XML PARSING ERROR単一の場所が間違っている場合とは対照的に）、ブラウザーはより堅牢になります>。
  • 現在の検索エンジンはおそらくあなたのページにインデックスを付けません（彼らはそれらをモノリシック画像として扱うでしょう）。 どうでも
  • コンテンツの順序は明確ではありません。Inkscapeのようなツールは、要素が出力に正しく配置され、zオーダーが正しい限り、要素が出力される順序を気にする必要はありません。ただし、Webページを作成している場合、これは重要です。スクリーンリーダーは、どの要素が意味的に最初であるかを確実に知らないためです。SVGを手動で編集しているだけの場合、これは問題ではありませんが、通常のSVGツールが注文をスクランブルする可能性があります。HTMLの場合、それは一般的に明らかです。
  • #id_of_some_element（ URLの最後に）フラグメント識別子をうまく実装することは困難です。以下のプレゼンテーションプログラムはそれらを使用していますが、Javascriptに依存していると思います（検索エンジンやjavascriptが無効になっている人には適していません）。*̶̶I̶t̶'̶s̶困難に変換したテキスト̶（のための検索エンジン、̶スクリーンリーダー、̶コピー＆ペースト、̶など）̶、̶特にときに生成付きのグラフィカル（私はこの1つについてはよく分かりません） ̶t̶o̶o̶l̶s̶.̶。たとえば、̶HTTP：̶/̶/̶w̶w̶w̶.̶a̶f̶r̶o̶k̶a̶d̶a̶n̶s̶.̶c̶o̶m̶/̶P̶a̶g̶e̶_̶0̶1̶.̶s̶v̶g̶示すまで̶D̶A̶N̶S̶E̶ ̶E̶T̶ ̶M̶I̶S̶E̶ ̶E̶N̶ ̶F̶O̶R̶M̶E̶ ̶B̶I̶E̶N̶V̶E̶N̶U̶E̶ ̶D̶ ̶a̶ ̶n̶ ̶s̶ ̶e̶ ̶r̶ ̶p̶o̶ ̶u̶ ̶r̶ ̶c̶é̶ ̶l̶ ̶é̶b̶ ̶r̶ ̶e̶ ̶r̶ ̶l̶ ̶a̶ ̶v̶ ̶i̶e̶.̶ ̶E̶ ̶n̶ ̶v̶e̶ ̶l̶ ̶o̶p̶p̶ ̶é̶ ̶e̶ ̶d̶ ̶e̶ ̶t̶ ̶a̶ ̶m̶ ̶b̶ ̶o̶ ̶u̶r̶ ̶s̶ ̶i̶n̶ ̶d̶o̶ ̶c̶ ̶i̶l̶ ̶e̶ ̶s̶ ̶e̶ ̶t̶ ̶i̶ ̶n̶ ̶c̶e̶ ̶s̶s̶ ̶a̶ ̶n̶t̶s̶は、Googleのように̶ 。コントラスト、̶も安っぽいWYSIWYG HTMLジェネレータ̶w̶o̶n̶'̶t̶スプリットアップランのテキストのようなこと.̶

考慮すべき点は、SVG要素をXHTMLおよびHTML 5に埋め込むことができるため、ブラウザーや検索エンジンを捨てることなく、いくつかの利点を得ることができるということです。

既存の使用法

プレゼンテーションでの使用について聞いたことがあります（いくつかの点で図面に近いため、上記の欠点のいくつかは当てはまりません）。

于 2012-06-05T07:55:51.670 に答える
3

.svg画像ファイルを使用してHTMLを知らなくてもWebページを作成できると考えるのは本当にクールです。html標準がいかに乱雑であるかを考えると、Inkscape .svgファイルを使用できるようにすることは、自然に芸術的な人々にとってはるかに簡単かもしれません。InkscapeとOpenclipartが、デスクトップパブリッシングやスクラップブッキングなどを行っている人々にとって、Inkscapeから直接Webページをエクスポートできるようにするのに最も役立つと考えると、強力なツールになります。

600年の植字は21世紀であり、メディア出版は中世のフォーマットの考え方に準拠する必要はありません。組版にはその宮殿がありますが、「平均的なジョー」ユーザーがCSSやHTMLを知らなくても、アートをWebページに変えるのに役立つ強力な実験について話しています。

参考までに、OperaチームはWebページにSVGを使用してかなり多くの作業を行ってきました-http://dev.opera.com/articles/svg/

于 2012-06-05T06:52:17.107 に答える
1

SVGベースのWebサイトを作成するために特別に設計されたプラットフォームがあります：Svija（免責事項：それは私のプロジェクトです）。

SVG Webサイトの利点は、文字通り何でもできることです。HTMLの場合のように、長方形の行に制限されません。

大きな問題はアクセシビリティです。現在、SVGテキストはGoogleによってクロールされていますが、ソースドキュメントによっては簡単に順序が狂う可能性があります。また、通常はHTMLタグ（H1はPよりも重要）によって伝達されるセマンティック情報は存在しません。

実現する主なことは次のとおりです。

  • SVGファイルで外部フォントと画像を使用できます
  • MicrosoftのブラウザがSVGを正しいサイズで表示するには、幅と高さを正しく指定する必要があります
  • 異なるSVGファイルを組み合わせると、IDが競合すると、CSSスタイルが誤って適用される可能性があります

画像やフォントに正しくリンクできることがわかった唯一のプログラムはAdobeIllustratorです。ここにSVGファイルを作成できることがわかったすべてのプログラムのリストがあり、どのプログラムがどの機能をサポートしているかについての情報がいくつかあります。

于 2020-11-10T15:25:49.773 に答える
0

実際、SVGに大きく依存しているページがあります。RaphaëlなどのJavascriptライブラリを使用するのが一般的な方法です。Paper.jsも、SVGを使用しないことを選択しましたが、一見の価値があります。

于 2012-06-05T07:05:06.023 に答える
-1

あなたは確かにSVGでウェブサイト全体を作ることができます、私は何年もそれをやっています。ページのデザイン（Think Cards）の見方を変えたいのであれば、それは試行錯誤の問題です。

于 2016-04-29T18:05:28.650 に答える