SVG: إنشاء التفاعل والرسوم المتحركة

SVG هو تنسيق صورة متجه مستند إلى XML للرسومات ثنائية الأبعاد مع دعم التفاعل والرسوم المتحركة. مواصفات SVG هي معيار مفتوح تم تطويره بواسطة World Wide Web Consortium (W3C) منذ عام 1999. يتم تعريف صور SVG وسلوكياتها في ملفات نصية XML. هذا يعني أنه يمكن البحث عنها وفهرستها وبرمجتها وضغطها. كملفات XML ، يمكن إنشاء صور SVG وتحريرها باستخدام أي محرر نصوص ، ولكن غالبًا ما يتم إنشاؤها باستخدام برامج الرسم.

في XML ، يمكن وصف الرسم ثنائي الأبعاد باستخدام الرسومات المُنشأة بتنسيق XML. ينشئ Canvas رسومات ثنائية الأبعاد بسرعة فائقة باستخدام JavaScript. نظرًا لأن SVG DOM يعتمد على XML ، فإن كل عنصر متاح بداخله. سيؤدي إرفاق معالجات أحداث JavaScript إلى عنصر ما إلى جعله أكثر تفاعلية.

ستعرض جميع متصفحات الويب تقريبًا SVG بنفس الطريقة التي تعرض بها PNG و GIF و JPG. يمكن رسم الرسومات باستخدام JavaScript باستخدام عنصر HTML Canvas ... SVG ، HTML CanvasSVG عبارة عن رسومات موجهة وتتكون من أشكال. Canvas هو تطبيق يعتمد على البيانات النقطية وكثافة البكسل ويحتوي على ثلاثة صفوف بالإضافة إلى قاعدة نقطية.

الأمر بسيط مثل تحديد عنوان URL لعنصر img> كما تتوقع لتضمين SVG باستخدام هذا العنصر. إذا لم يكن لديك SVG نسبة عرض إلى ارتفاع متأصلة ، فيجب عليك تضمين سمة ارتفاع أو عرض (أو كليهما). إذا لم تكن قد قمت بذلك بالفعل ، فيمكنك قراءة الصور بتنسيق HTML.

تنسيق SVG هو تنسيق رسوم يسمح لك بإنشاء رسومات متجهة عالية الجودة. بعبارات بسيطة ، هذا يعني Scalable Vector Graphics. Adobe Illustrator هو أداة تصميم رسومي. على الرغم من أنه يمكن استخدام sva على الإنترنت بسهولة نسبيًا ، إلا أن هناك بعض الأشياء التي يجب أن تعرفها.

ما الذي يمثله Svg في Html5؟

تعتمد لغة الترميز Scalable Vector Graphics (SVG) على XML وتصف الرسومات المتجهة ثنائية الأبعاد.

تتيح لك القدرة على دمج مجموعة متنوعة من الرسومات والرسوم المتحركة في صورة واحدة إنشاء مجموعة واسعة من الرسومات والرسوم المتحركة. نظرًا لأنها مناسبة للشعارات والأيقونات والرسوم التوضيحية ورسومات الويب ، يمكن استخدامها لمجموعة واسعة من الأغراض. نظرًا لطبيعته المفتوحة ، يمكن لأي متصفح ويب استخدامه. من المستحسن أن نتبع أفضل الممارسات. عند استخدام SVG ، ضع في اعتبارك الاعتبارات التالية. يجب أن يكون كل رسم مصحوبًا بامتداد. علامة svg . يمكن تعريف أوراق الأنماط باستخدام علامة نمط. لتحديد أبعاد محتوى SVG ، استخدم السمة svg: viewBox. لتحديد كيفية عرض المنطقة المعروضة ، استخدم السمة svg: viewPort. تعد السمة svg: Refresh مفيدة في ضمان تحديث الرسومات دائمًا. يمكن استخدام السمة svg: clipPath لإنشاء أشكال مخصصة. املأ المخطط التفصيلي وتأثيرات الحدود باستخدام السمة svg: stroke. املأ صورة بألوان أو أنماط باستخدام سمة svg: fill. يمكن استخدام السمة svg: pathLength للحد من طول عنصر المسار.

فوائد استخدام رسومات Svg

لعمل مستطيلات ، استخدم المستطيل * لإنشاء مسارات ، استخدم علامات * الخط والمتعدد الخطوط. عند تصميم شكل أكثر تعقيدًا ، استخدم العلامتين * القطع الناقص "و * القطع الناقص المتعدد". باستخدام علامات * g و * text و * link ، يمكنك رسم نص أو رسم متجه. يمكن تطبيق المرشحات على الرسوم باستخدام علامة المرشح *. باستخدام رسومات SVG ، يمكنك إنشاء منشورات مدونة ومواقع تجارة إلكترونية ومعارض عبر الإنترنت. يمكن استخدام رسومات SVG في أي نوع من التطبيقات ، بما في ذلك Adobe Illustrator و Inkscape.

ماذا يعني Svg؟

إنه تنسيق الملف الأكثر استخدامًا في الويب. تستخدم الملفات المتجهة ، بدلاً من الملفات النقطية المستندة إلى البكسل ، الصيغ الرياضية لتخزين الصور على شبكات بناءً على النقاط والخطوط.

لا يوجد تنسيق آخر مستخدم لديه القدرة على إنشاء Scalable Vector Graphic (SVG). على عكس أنواع الصور الأخرى ، لا يستخدم SVG لوحدات البكسل الفريدة. بيانات "المتجه" ، التي تحتوي على عناصر ذات حجم واتجاه محددين ، هي المكون الرئيسي للبيانات. من الناحية النظرية ، يمكنك استخدام مجموعة من المتجهات لإنشاء أي نوع من الرسومات تقريبًا يمكنك التفكير فيه. يمكن إنشاؤها كصورة أصلية أو يمكن تحويلها من نقطة الصفر. باستخدام أداة تصميم رسومية حديثة ، يمكنك أيضًا استخدام SVGs. إذا كنت لا ترغب في تنزيل أي برنامج ، فيمكنك أيضًا استخدام أدوات التحويل عبر الإنترنت.

إذا كنت تستخدم WordPress ، فلن تتمكن من استخدام SVGs في نظام إدارة المحتوى (CMS). يأتي الاختبار الحقيقي عندما تقوم بتصميم SVGs من البداية أو تقوم بتحويلها إلى التنسيق باستخدام الصور المناسبة. إذا كنت تريد القيام بالأمرين معًا ، فيمكنك استخدام Adobe Illustrator و GIMP.

واحدة من أعظم مزايا استخدام SVG هو أنها مبنية على XML. نتيجة لذلك ، ستتمكن من إنشاء ملفات SVG وتحريرها بسهولة دون الحاجة إلى الاعتماد على أي برنامج خاص. علاوة على ذلك ، يمكن تحريك ملف السمات ، مما يجعله مثاليًا لإنشاء رسومات ديناميكية. إذا كنت تبحث عن تنسيق ملف متعدد الاستخدامات يمكن أن يساعدك في إنشاء رسومات عالية الجودة لموقعك على الويب ، فقد ترغب في تجربة SVG.

تنسيق Svg هو الخيار الأفضل للرسومات

على الرغم من حقيقة أن JPG و GIF و PNG لا تزال تستخدم كتنسيقات نقطية ، فإن ملف. من الواضح أن ملف SVG هو الخيار الأفضل للرسومات عالية الجودة. نظرًا لأن صورتها الواضحة والنقية تظل واضحة حتى في الدقة والأحجام التي تتراوح من 1 إلى 50 ، فهي مثالية لمواقع الويب. علاوة على ذلك ، نظرًا لأن ملفات SVG هي ملفات متجهة ، فيمكن تصغيرها أو زيادتها دون فقد أي من درجات الدقة الخاصة بها. بالإضافة إلى ذلك ، يتوفر تنسيق SVG على نطاق واسع كتنسيق HTML5 في متصفحات الإنترنت.

هل يتم دعم Svg في Html5؟

نعم ، يتم دعم SVG في HTML5. يرمز SVG إلى Scalable Vector Graphics وهي لغة لوصف الرسومات ثنائية الأبعاد. HTML5 هو أحدث إصدار من معيار HTML ويتضمن دعمًا لـ SVG.

عندما يتعلق الأمر بالرسومات المتجهة الثابتة والديناميكية ، فإن تنسيقات ملفات Scalable Vector Graphics (SVG) تعتمد على XML وسهلة الفهم. نظرًا لأن صور SVG هي ملفات XML ، يمكن إنشاؤها وتحريرها بواسطة أي محرر نصوص ، لكنها غالبًا ما تكون أكثر ملاءمة لعملها باستخدام برامج الرسم مثل Inkscape. تدعم غالبية متصفحات الويب الحديثة ترميز SVG وتعرضه مباشرةً. نظرًا لأن Inkscape ربما استخدم إحداثيات غريبة إلى حد ما ، فقد يتطلب الأمر عملاً إضافيًا لإنشاء الرسومات. في حالة عدم وجود أي منها ، يقوم Save as Optimize بتعيين viewBox إلى 100٪ ؛ في حالة عدم وجود أي منها ، يقوم Save as Optimize بتعيين العرض والارتفاع إلى 200٪. حتى إذا قمت بتصغير الصورة ، يمكن عرض الحجم الكامل. في هذا الفصل ، سنوضح لك كيفية تضمين صور SVG بأحجام مناسبة لجهازك.

يسمح لك HTML 5 بتضمين الصور الثابتة مع علامة img ، ولكن فقط في HTML 5. إذا كان العنصر الخاص بك يتضمن رسومًا متحركة و / أو عناصر تفاعلية ، فيجب عليك استخدام العنصر أو عنصر صورة SVG . قم بتعيين viewBox وقم بتضمين SVG الذي يحدد حجمه بناءً على النسبة المئوية بالإضافة إلى حجمه. يمكنك أيضًا استخدام سمة التحويل لتغيير حجم أجزاء مختلفة من رسم SVG بالإضافة إلى تغيير حجم الأجزاء المختلفة. يعد استيراد الصورة بحجمها الأصلي وقياسها حلين بسيطين. ليس من الضروري استخدام إحدى الطريقتين التاليتين ، لكن من السهل فهمهما ويجب أن تعمل في جميع المتصفحات. عندما تقوم بتصميم عنصر svg ، يمكن استخدام خصائص HTML CSS العادية لنقله إلى اليمين أو اليسار.

من السهل استخدام WebVector). هناك العديد من برامج تحرير الرسومات المتجهة الممتازة المتاحة ، ولكن Inkscape هو المفضل لدي. إنه متاح مجانًا ومفتوح المصدر وقادر على العمل مع مجموعة متنوعة من اللغات. يمكنك معرفة المزيد عن SVG من خلال زيارة المواقع التالية: كتب Chris Coyier و Tony Gomes كتاب SVG : The Definitive Guide. كتب كريس جاميل ونويل كينجسبري كتاب إنكسكيب: الدليل. إذا كنت ترغب في إنشاء رسومات متجهة ولكن لا تعرف كيفية استخدام محرر ، فإن Web Vector أداة رائعة. إنه سهل الاستخدام ، ويمكنك بسهولة إنشاء ملفات SVG و PNG بنفس التنسيق كما تفعل في أي تنسيق صورة آخر.

يمكن استخدام صور Svg في مستندات Html.

كيف يمكنني تحميل ملفات بتنسيق HTML؟
يمكن تضمين الصور في مستندات HTML باستخدام امتداد الملف sva. إذا كنت تفضل ذلك ، يمكنك استخدام عنصر [svg] لإنشاء رسومات مخصصة لصفحات الويب الخاصة بك.

عناصر Svg في Html

يمكن عرض الرسومات التي تحتوي على رسومات sva باستخدام عنصر HTML * svg. يمكن استخدام الحاوية لرسم أشكال متعددة ، مثل المربعات والمسارات والنص والصور الرسومية والدوائر. تم العثور على علامة HTML هذه في كل متصفح حديث تقريبًا.

إنه مثالي لإنشاء رسومات يمكن تصغيرها أو زيادتها دون فقدان الجودة. علاوة على ذلك ، نظرًا لأن SVG يعتمد على XML ، فمن السهل تعديل الرسومات أو إعادة استخدامها دون فقد أي من بياناتها الأصلية. هناك العديد من ملحقات المستعرض المتاحة لدعم SVG ، بما في ذلك Internet Explorer و Firefox و Chrome و Opera.
إذا كنت ترغب في إنشاء رسومات سهلة القراءة والتعديل ، يمكنك استخدام sva. إنها ليست سهلة التعلم فحسب ، ولكنها توفر أيضًا دعمًا ممتازًا من المتصفحات الرئيسية.

Html Svg Icon

رمز HTML svg هو صورة رسومية صغيرة يمكن استخدامها لتمثيل مفهوم أو كائن معين. عادةً ما يتم إنشاء هذه الرموز بتنسيق Scalable Vector Graphics (SVG) ، وهو تنسيق قياسي للصور المتجهة التي يمكن عرضها على الويب.

يمكنك استخدام تنسيق صورة Scalable Vector Graphics (SVG) في Adobe Illustrator بالإضافة إلى PNG أو JPG. نتيجة لذلك ، سيكون لديك وصول إلى مجموعة محددة من دعم المتصفح لنظام Android 2.3 والإصدارات الأحدث ، بالإضافة إلى IE 8 والإصدارات الأقدم. صورة الخلفية ، بشكل عام ، هي نفس صورة img. ستضيف Modernizr اسم فئة no- svg إلى عنصر HTML إذا كان المستعرض لا يدعمه. يمكن التحكم في عناصر HTML ، مثل عناصر CSS ، كما يمكن التحكم فيها. يمكن أيضًا إعطاؤهم أسماء فئات والوصول إلى خصائص محددة تعمل عليهم. يجب تضمين ورقة أنماط خارجية في ملف SVG عندما تريد استخدامها في المستند.

إذا تم تضمين هذا في HTML الخاص بك ، فسيتم عرض الصفحة دون محاولة القيام بذلك. لن تقوم في الواقع بحفظ أي حجم ملف باستخدام عناوين URL للبيانات ، لكنها ستوفر لك الكثير من الوقت لأن البيانات موجودة. Mobilefish.com لديه أداة تحويل عبر الإنترنت تقوم بتحويلها إلى 64 بت. ربما لا يكون Base64 هو الخيار الأفضل. بسبب تنسيقه الأصلي. الطريقة التي يتم بها إنشاء SVG أكثر تكرارًا من base64 ، وهي أفضل بكثير. يمكن العثور على grunticon في المجلد المسمى باسمه. عادةً ما تكون هذه الملفات عبارة عن رموز قمت برسمها في تطبيق مثل Adobe Illustrator وتحويلها إلى HTML. عناوين url للبيانات ، وبيانات uls ، وصور png العادية هي التنسيقات الثلاثة لعناوين url للبيانات ، وبيانات uls ، وصور png العادية.

Svgs: مستقبل الصور

إذا لم تكن معتادًا على المصطلح ، فإن SVG هي في الأساس صورة يتم إنشاؤها باستخدام رمز. تتوفر الرموز والشعارات المخصصة للتحرير ، ويمكنك تغيير مظهر الصورة وأسلوبها.

مسار Html Svg

يتم استخدام مسار HTML svg لإنشاء رسم متجه من مجموعة من النقاط. يتم تحديد المسار بنقطة البداية والنهاية ، بالإضافة إلى عدد من نقاط التحكم. تُستخدم نقاط التحكم لتحديد منحنيات المسار.

المسارات: الأساسيات

يمكنك إنشاء مسار باستخدام طريقتي "نقل إلى" و "خط إلى". كلاهما يبدأ وينتهي بإحداثيين ، الأول للبداية والثاني للنهاية. ستعمل طريقة "lineTo" على إنشاء خط مستقيم من نقطة البداية إلى نقطة النهاية ، بينما طريقة "الانتقال إلى" ستنقل نقطة ربط المسار إلى الإحداثيات المحددة.
ومع ذلك ، هناك طرق أخرى لتعديل المسارات بنفس فعالية هذه الطرق. يمكنك إزالة مسار باستخدام طريقة "ضربة الفرشاة" ، أو يمكنك تعبئته بلون خالص باستخدام طريقة "ملء".

نموذج Svg الكامل

يرمز SVG إلى Scalable Vector Graphics. SVG هو امتداد ملف صورة رسومية متجهية يحتوي على صور ثنائية الأبعاد.

حتى لو كانت الصورة صغيرة ، فإن SVG يجعلها تبدو رائعة بغض النظر عن الحجم. محسّن لمحركات البحث ، أصغر من التنسيقات الأخرى ، ويمكن أن ينتج رسومًا متحركة ديناميكية. في هذا الدليل ، سأشرح ماهية هذه الملفات ، وما يجب استخدامها من أجله ، وكيفية استخدامها لإنشاء SVG. لأن الصور الفلكية لها دقة ثابتة ، فإن زيادة حجمها يقلل من جودة الصورة. يمكن تخزين الصور كمجموعة من النقاط والخطوط بينها بتنسيق رسوم متجهة. يتم استخدام XML أو لغة ترميز XML لإنشاء هذه التنسيقات. يتم تحديد كل الأشكال والألوان والنص الذي يتألف من صورة بواسطة كود XML في ملف SVG.

حقيقة أن كود XML أنيق للغاية للنظر إليه لا يعني أنه من السهل استخدامه لمواقع الويب وتطبيقات الويب. يمكن الحفاظ على جودة الصورة دون الحاجة إلى زيادة الحجم. لا توجد علاقة بين حجم الصورة أو نوع العرض في sva. بشكل عام ، تفتقر SVGs إلى عمق الصورة النقطية. نظرًا لأن SVGs توفر قدرًا كبيرًا من التحكم في مظهر التصميم ، يمكن للمصممين والمطورين أن يكونوا ناجحين للغاية. أنشأ اتحاد شبكة الويب العالمية تنسيق ملف لرسومات الويب بالتعاون مع أعضاء الاتحاد الآخرين. يمكن للمبرمجين قراءة كود XML كملف نصي بعلامة SVG.

يمكنك تغيير مظهر SVGs ديناميكيًا باستخدام CSS و JavaScript من خلال الجمع بين إمكاناتها. هناك العديد من التطبيقات للرسومات المتجهة القابلة للتطوير. يمكن إنشاؤها باستخدام محرر رسومات وهي سهلة الاستخدام لأنها مرنة وتفاعلية وبسيطة. يعتبر منحنى التعلم والقيود الخاصة بكل برنامج فريدة من نوعها لهذا البرنامج. يجب أن تجرب بعض الخيارات المختلفة للتعرف على الأدوات قبل اتخاذ قرار بشأن الخيار الأفضل بالنسبة لك.

Svg مقابل. jpg / png

تفقد صور JPG / PNG الدقة بمرور الوقت ، بينما صور SVG تعتمد على المتجهات ويمكن تصغيرها دون فقدان الجودة.