المزايا العديدة لرسومات المتجهات القابلة للتحجيم

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

ما هي فائدة Svg؟

يمكن إنشاء رسومات الويب مثل الشعارات والرسوم التوضيحية والمخططات باستخدام ملفات VNG. على الرغم من صغر حجمها ، من الصعب عرض صور رقمية عالية الجودة. يُفضل ملف JPEG بشكل عام على صورة عالية الجودة من حيث التفاصيل. يمكن فقط للمتصفحات الحديثة عرض صور SVG.

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

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

ملفات Svg للطباعة

من الممكن أيضًا طباعة ملفات SVG. نظرًا لأن الملفات تعتمد على المتجهات ، يمكنك تصغيرها دون فقدان الجودة أو التفاصيل التي تقدمها.

كيف يعمل كود Svg؟

يتكون كود SVG من التعليمات التي يستخدمها الكمبيوتر لرسم الصور. التعليمات مكتوبة بلغة خاصة تسمى XML. XML هي لغة نصية تشبه HTML. ومع ذلك ، فإن ملفات SVG أصغر بكثير من ملفات الصور الأخرى مثل JPEG أو PNG. هذا بسبب حفظ ملفات SVG بتنسيق مضغوط.

يعرّف معيار SVG مجموعة من علامات XML التي يمكن استخدامها لإنشاء مجموعة متنوعة من الأشكال والصور. W3C (اتحاد شبكة الويب العالمية) مسؤول عن صيانة وتطوير معيار SVG. يمكن استخدام الصور بتنسيق .VNG لمجموعة متنوعة من الأغراض ، بما في ذلك صفحات الويب والرسوم التوضيحية والرسومات. دقة الصورة مستقلة عن دقة الملف ، ويمكن تكبير صور SVG أو تصغيرها دون فقدان الجودة. يمكنك تحويل ملفات SVG إلى مجموعة متنوعة من البرامج مثل Adobe Photoshop و Illustrator. من الممكن أيضًا استيراد SVGs إلى Microsoft Word و Microsoft PowerPoint. يمكن استخدام الصور بتنسيق SVG لمجموعة متنوعة من صفحات الويب ، بما في ذلك تلك المصممة للأشخاص ذوي الاحتياجات الخاصة. بالإضافة إلى صور SVG ، يمكن أن تتضمن صفحات الويب ذات شاشات العرض عالية الدقة هذه الصور.

Svg Keys جافا سكريبت

تُستخدم مفاتيح SVG للوصول إلى العناصر ومعالجتها في JavaScript. يتم استخدامها أيضًا لإضافة مستمعين للأحداث والتحكم في سلوك مستند SVG .

يتم تمثيل HTML و SVG أيضًا باستخدام نموذج كائن المستند (DOM) ، وهو نفس HTML. نتيجة لذلك ، يمكن التلاعب بها بسهولة باستخدام جافا سكريبت. في هذا الدرس ، سوف أطلعك على عملية إنشاء واستخدام SVGs في كل من النماذج المضمنة والخارجية. يمكن العثور على أمثلة التعليمات البرمجية في هذا المنشور على GitHub في الجزء العلوي من الصفحة. عند إضافة عنصر <script> إلى SVG خارجي ، يمكن استخدام نفس الكود. هذا ممكن لأن SVG لا يمكنه الوصول إلى مستند HTML المضمن فيه وبالتالي لا يمكنه رؤية SVGs الأخرى على الصفحة. نظرًا لأن JS جزء من XML ، يجب عليك التفاف الكود في CDATA قبل تحليله.

في HTML ، لا يوجد تمييز بين إنشاء العناصر وإزالتها. باستخدام طريقة createElementNS () للمستند ذي الصلة ، يجب عليك أولاً تمرير عنوان URL الخاص بالعنصر واسم العلامة إلى مساحة اسم SVG . عند إزالة عنصر ، قم بإنشاء عقدة نصية منفصلة باستخدام الوظيفة createTextNode () ثم قم بإلحاق هذا بالعنصر. إنه يعمل لأن المستندين ليسا في نفس المجلد.

طريقة Selectall ()

يمكن استخدام طريقة selectAll لتحديد جميع العناصر في المستند. بالإضافة إلى ذلك ، يمكننا استخدام طريقة التعبئة لملء العناصر المحددة بألوان مختلفة باستخدام طرق الحد () والتعبئة ().

أيقونات Svg

أيقونات SVG هي أيقونات تم إنشاؤها باستخدام تنسيق Scalable Vector Graphics (SVG). هذا التنسيق هو تنسيق رسومي متجه مدعوم على نطاق واسع بواسطة متصفحات الويب الحديثة. يمكن إنشاء رموز SVG باستخدام مجموعة متنوعة من البرامج ، ولكن يتم إنشاؤها عادةً باستخدام برامج تحرير الرسوم المتجهية مثل Adobe Illustrator أو Inkscape أو Sketch. تتمتع رموز SVG بالعديد من الفوائد على الرموز التقليدية القائمة على البيانات النقطية. يمكن تحجيمها إلى أي حجم دون فقدان الجودة ، ويمكن تعديلها وتخصيصها بسهولة. كما أنها أصغر حجمًا في حجم الملف من الرموز التقليدية ، مما يجعلها أسرع في التنزيل والتحميل.

يمكن رسم رسومات موجهة قابلة للتطوير (SVG) باستخدام لغة التوصيف القابلة للتمديد (XML) باستخدام تنسيق الصورة هذا. بعبارة أخرى ، لا يعد SVG صورة بكسل ذات حجم ثابت ، ولكنه عبارة عن كتلة تعليمات برمجية XML يتم تقديمها مباشرة إلى المتصفح وعرضها فيه. بالمقارنة مع الكلمات ، فإن هذه الصور تشير إلى الإجراءات والمعلومات بسرعة. جاء إدخال ملفات صور SVG على الويب في نفس الوقت الذي بدأت فيه Tamagotchis و iMacs و Palm Pilots في شق طريقها إلى منازلنا. معظم متصفحات الويب لا تدعم HTML5 وليس لديها نية للقيام بذلك. في عام 2017 ، بدأت متصفحات الويب في تقديم SVG بدون مشكلة ، على الرغم من حقيقة أن التكنولوجيا لم تكن متاحة على نطاق واسع. نظرًا لأنها متجهات ، فلن تواجه مشكلات في تغيير حجمها عند استخدام خطوط ويب SVG أو خطوط ويب.

يتم منحك المزيد من خيارات التصميم مع مجموعات أيقونات معدة مسبقًا ، لكنها محدودة بدرجة أكبر. إذا كنت ترغب في إضافة المزيد من التنوع ، فإن ملف. ملف V هو أفضل رهان لك. يمكن إنشاء رمز SVG باستخدام أداة أو يد. يتم استخدام لوحة رسم افتراضية لرسم الرموز باستخدام برنامج صورة متجه . بعد ذلك ، يمكنك تصدير ملف your.svg. يوفر Evernote أيضًا رموز SVG جاهزة مجانية ، بالإضافة إلى ملفات PDF. يتم استخدام عرض الشكل وارتفاعه لتحديد أبعاده ، ويتم تحديد موضعه بواسطة الحرفين x و y. يمكن أيضًا تعيين أسماء الفئات على أسماء العناصر في أوراق الأنماط المنفصلة لكل منها ، أو يمكن تحديدها في ملفات CSS للفئات المعنية. تتيح أداة إنشاء الرموز بدون رمز Ycode للمستخدمين تغيير ألوان هذه الرموز ببساطة عن طريق تغيير لون الخلفية.

إنشاء أيقونة SVG 101

لإنشاء أيقونة SVG ، يجب عليك توفير معرّف فريد واسم ملف. عند إدراج ملحق الملف [.svg] ، سيتم عرض اسم الرمز الخاص بك. ستدخل معرفًا رقميًا كجزء من معرف الرمز الخاص بك. سيتم استخدام هذا المعرف عندما تشير إلى الرمز الخاص بك في الترميز الخاص بك. يمكن استخدام برامج الصور المتجهة ، مثل Illustrator أو Inkscape ، لإنشاء رمز SVG الخاص بك. لتصدير الرمز الخاص بك ، يجب إنشاء ملف an.sva. يمكنك تصدير الرمز الخاص بك بالانتقال إلى ملف> تصدير SVG وتحديد برنامج الصور المتجه. لاستخدام الرمز الخاص بك ، يجب عليك تقديم كل من الاسم والمعرف الفريد. في اسم الملف ، سترى اسم الرمز الخاص بك ، بالإضافة إلى معرف الرمز الذي ستقوم بتعيينه.

ملفات Svg

SVG هو امتداد ملف صورة رسومية متجهية يحتوي على صور قابلة لتغيير الحجم. يتم استخدام تنسيق الملف هذا بواسطة مواقع الويب والتطبيقات الأخرى لإنشاء الصور وعرضها على الإنترنت.

لدينا أكثر من 280،000+ SVGs للاختيار من بينها ، مما يجعلنا الاختيار الأكثر شعبية. يمكن استخدام Silhouette وآلات القطع الأخرى ، بالإضافة إلى برامج التصنيع وآلات القطع الشهيرة ، لإنشاء SVGs الخاصة بنا. يمكنك الاختيار من بين مجموعة متنوعة من تصميمات الورق ، وخيارات صنع البطاقات ، ورسومات القمصان ، وتصميمات اللافتات الخشبية ، وغير ذلك الكثير. تتوفر ملفات Svg لـ Silhouette و Cricut مجانًا. إذا كنت تريد بعض الإلهام لكيفية استخدام تصميماتنا الرائعة للملفات المقطوعة ، فلدينا بعض مقاطع الفيديو الرائعة على قناتنا على YouTube. مع هذه المجموعة المتنوعة من التصميمات والمواد والأشكال الحرفية الرائعة ، قد تحتاج ببساطة إلى الاسترخاء والحرفية.

أسهل طريقة لإنشاء صور SVG وعرضها على متصفح الويب الخاص بك هي باستخدام مكتبة مثل SVGKit. لمزيد من الإرشادات التفصيلية ، يمكنك أيضًا الاطلاع على كتابنا التمهيدي SVG . باستخدام صورة SVG ، يمكنك تحرير مشروع Office for Android. عندما تضغط عليها ، ستظهر علامة تبويب الرسومات ، وستكون SVG التي تريد تحريرها مرئية. هناك عدد من الأنماط المحددة مسبقًا التي يمكنك استخدامها لتغيير مظهر ملف SVG بسرعة. لقد استغرق SVG وقتًا طويلاً لتلحق بجميع المتصفحات والأجهزة الرئيسية ، لكنها متاحة الآن على نطاق واسع. ملفات SVG صغيرة ، ويمكن البحث فيها ، وقابلة للتعديل ، وقابلة للتطوير ، ولديها القدرة على التغيير - باستخدام التعليمات البرمجية. يمكنك استخدامها على الفور في HTML الخاص بك إذا كنت لا تريد ترميز أي شيء (إنشاء موقع ولكن لا ترغب في الترميز). لإنشاء وعرض SVGs بسرعة ، يمكن تنزيل مكتبة مثل SVGKit وتثبيتها على جهاز الكمبيوتر الخاص بك.

من ناحية أخرى ، لا يمكن تصغير حجم ملفات Jpeg فقط وليس لأعلى. الفرق بين Svg و Jpeg

تدعم معظم المتصفحات ملف svg بتنسيق رسومات المتجهات ، بينما لا تدعم ملف JPEG بتنسيق الصورة النقطية. الاختلاف الأساسي بين ملف SVG وملف JPEG هو أن ملف a.VSW هو تنسيق مستند إلى نص ، بينما ملف a.JPM هو تنسيق نقطي. يمكن تحرير ملف SVG باستخدام محرر نصوص تمامًا كما يفعل JPEG. علاوة على ذلك ، يمكن معالجة عدد كبير من الصور بتنسيق ملف SVG بسيط ، مما يسمح بالحفاظ على الجودة.