svgEditor

React SVGエディター

ゼロから構築されたSVGライブラリは使用されていません

linkedInで私をping cing pinging feature requestの場合は？

より興味深いプロジェクトについては、LinkedInで私をフォローしてください

サイトにアクセスするにはここをクリックしてください

デモ

について

• React SVG Editorは、Webサイト、アプリケーション、ロゴなど、あらゆるものを作成するのに役立つ強力な設計ツールです。
• Web用に構築されたReact SVG Editorは、最初から最後までより良いデザインを作成、共有、テスト、および出荷するのに役立ちます。
• ツールを統合するか、ワークフローを単純化するかどうかにかかわらず、SVGエディターは、同じページに全員を維持しながら、デザインプロセスをより速く、効率的で楽しいものにします。

特徴

• レイアウトを設計するために提供される複数のツール。
• プロジェクト内の美しいグラデーションを作成および使用するために提供されるグラデーションクリエーター。
• テーマは簡単になり、パレットで色を選択して保存し、プロジェクト全体でそれらを使用しました。色が好きではなく、変更され、使用されたすべての要素に自動的に適用されます。
• クリップアート検索などのツール、イラスト検索も提供されています。
• 形を簡単に変換し、高さ、幅、境界色、背景色などのさまざまな特性を操作します。
• 8つ以上のCSSフィルターが利用可能です。
• 大規模なプロジェクトを小さな部品に分割し、プロジェクトの別のページに設計します。
• SVGまたはJSONとしてプロジェクトをエクスポートします。
• JSONファイルを再びインフォットします
• アウトラインのような効果、Box-Shadowも利用可能です。
• すべてがローカルに保存されます、動作するためにインターネットは必要ありません
• ポインターヘルパーは、あなたの形を完璧な位置に置くのに役立つように提供されます。

使い方

• [ヘッダーに新しいファイルの作成]をクリックします
• ツールを選択します
• キャンバスをクリックして形状を追加します
• 右側のサイドバーにはすべてのプロパティが含まれており、そこからそれらを操作します。
• ライン、ポリゴン、パスのようなマルチポイントの形状の場合、右クリックしてパスを終了します。
• Ctrlキーを押して、形状をスケーリングします。
• シフトキーを押して、形状をドラッグして回転させます。
• ページのファイルをクリックしてから、ページを追加します。
• [ファイル]をクリックしてから[保存]をクリックして、プロジェクトを保存します。
• グラデーションをクリックすると、グラデーション作成ツールが開きます。
• 色をクリックして、パレットに色を追加します。
• 挿入をクリックすると、クリップアート検索ツールが開きます。

すべての機能が得られるもの

• 私が作成した最も複雑なプロジェクトはReact SVGエディターです。ブラウザのSVGデザインツールは、ロゴデザイナー、PPT、UI/UXデザインツールなどの多くのユースケースを備えています。プロジェクトや、グラデーション、フィルター、影などの効果を追加するための検索およびユーザークリップアートを検索し、ユーザークリップアートを組み込んでいます。
• サークル、長方形、楕円、テキスト、ライン、プロイライン、ポリゴン、ペンシル、画像などの形状が含まれています。このアプリを開いて、好きなものを設計するだけで、すべてのデザインはIndexEdDBと呼ばれるブラウザデータベースに保存されます。
• また、2つの形状をグループ化して、製品カード、ナビゲーションバー、引用符などのコンポーネントを作成し、デザイン全体に再利用することもできます。グループの形を追加するために、Scrated Brceasからプロジェクトを再度開始する必要がありました。
• また、デザインプロジェクトに複数のページを追加して、後でパワーポイントプレゼンテーションのように実行することもできます。 - プロジェクトはReact.jsとReduxと使用される言語を使用して作成されています。