簡単であるVUEJSにおけるSVGSの使用

ウェブのイメージ

ビットマップ

Webp

SVG

SVGの構文

VUEJSにおけるSVGSの使用

vue create <project-name>

プロジェクトが正常に作成されると🎉, 端末に以下のメッセージを表示します.

メッセージを開始するには便利なコマンドが含まれて!

.
├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

• I have created a sample SVG to use in the interactive examples provided.. You may go ahead and download it by clicking this link.

You may choose to rename the file, then proceed to add it to the root of the src/assets folder, such that the structure of the src folder is similar to the one below:

.
├── App.vue
├── assets
│   ├── logo.png
│   └── sample.svg
├── components
│   └── HelloWorld.vue
└── main.js

インラインSVG

When using this method you include the svg directly in your markup. It's important to mention that when the svg is directly embedded in the document or template as in the case of Vuejs ,there is no need to include the xlmns attribute.

The pros of using this method are that you can use CSS to style your svg and use Javascript to extend its functionality just as you would a normal HTML element.

The main drawback of this method is that if your svg is large or when you have a lot of svg your template, your template becomes cluttered. In that case it would be better incorporate SVGs as standalone files as it is explained in the next section.

外部SVG

To embed an external SVG in your Vuejs template you use the methods listed below and always ensure that the xlmns attribute is included in the root element of the SVG otherwise none of the methods provided will work!

💡
  xmlns="http://www.w3.org/2000/svg"

( I ) VEVEsテンプレートに外部SVGをイメージ要素として埋め込む

注意:置換<file-name> あなたが上記のSVGリソースに与えたユニークな名前で.
このメソッドを使用すると、svg 実際にはドキュメントには存在しませんが、<img> 要素.だから、ほとんどの場合は、通常のイメージとしてそれを操作することができます.
このメソッドのconsは、スタイルの制限とSVGSの機能拡張を含みます、そして、あなたがあなたのテンプレートの多くのSVGを扱っているならば、それはイメージ要素でそれらを包装し続けるのはかなり面倒です.
( II )使用SVG LoadersVuejsは、資産バンドルとしてWebpackを使用します.Webpackは、それを扱うファイルタイプごとにローダを使用します.一般的なファイルタイプのローダは通常、VUE CLIを使用してプロジェクトをブートするたびにあらかじめ設定されています.つまり、これらのファイルタイプをインポートするときに自動的に読み込むことができるということです.残念ながら.svg ローダは事前に設定されていないので、それらをダウンロードする必要が来るnpm 手動で設定します.
SVG VuejsローダであるNPMで利用できる多くのモジュールがあります.この例では、vue-svg-loader . セットアップされた指示は、インストールされたことがない人々のために提供されるリンクでリストされます、そして、UVEJsでモジュールを構成することは以下の指示に従います:
以下の指示はVue CLIでブートストラップされたプロジェクトに適しています.

以下のコマンドを端末にインストールします.

npm i -D vue-svg-loader vue-template-compiler

プロジェクトディレクトリのルートでvue.config.js 以下のコードをファイルとコピーしてペーストします

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

変更を保存することを確認します.
おめでとう!🎊
あなたは正常にインストールされ、設定の設定vue-svg-loader モジュールです.
では、どのように使うのかを学びましょうvue-svg-loader vvejsでSVGを埋め込むモジュール.

最初にすべてのボイラープレートコードを削除しますApp.vue ファイル名src ディレクトリ.

次に、上の図にコードをコピーしますApp.vue , 変更を保存します.

The svg 私は、スタンドアロンファイルとして存在していますsample.svg , それで、あなたがあなたの名前をつけたものに従います.上記のコードを微調整する必要があります.

次のコマンドを端末で実行し、ブラウザを参照してくださいhttp://localhost:8080/ 埋め込みSVGを使用してVuejsアプリを表示するには🚀.

npm run serve

このメソッドの使用方法は以下の通りです:

あなたのテンプレートはきれいに保たれます.

そして、あなたがどのようにスタイルをすることができるか、あなたのSVGの機能性を広げるかに関する制限はありません.

参考文献

What are Scalable Vector Graphics (SVG) & how are they special? | Web Demystified Episode 4