رسومات موجهة قابلة للتطوير (SVG): مقدمة

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

عندما يتعلق الأمر بعرض الصور المتجهة على الويب ، فلا يوجد معيار آخر غير Scalable Vector Graphics (SVG). أحد عيوبه هو التنسيق المستند إلى XML ، والذي يحتوي على حجم ملف كبير نسبيًا. خصائص النص العادي لـ XML تجعله مناسبًا للضغط. ملفات Gzip محمية بامتداد SVGz الافتراضي . تم تقديم رأس ترميز المحتوى في HTTP / 0.0 لتحديد ترميز الملف. عندما بدأ الناس في ترحيل ملفات JavaScript و CSS و HTML الخاصة بهم إلى تنسيقات مضغوطة ، أصبحت الملفات المضغوطة شائعة بشكل متزايد. عندما قام المتصفح بفك ضغط هذا المحتوى ، فقد ساهم بشكل كبير في انتشار هذا الخلل على نطاق واسع. نتيجة لذلك ، يتم إعاقة عملية التقديم. يمكنك تنزيل ملفات svgz عن طريق تحديد Content-Disposition (من القائمة).

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

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

هل ملف Svg يفقد الجودة؟

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

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

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

كم يمكن ضغط Svg؟

يمكن ضغط SVG إلى حجم ملف صغير جدًا ، مما يجعله مثاليًا للاستخدام على الويب. عند استخدامها على الويب ، يمكن ضغط ملفات SVG باستخدام gzip ، والذي يمكن أن يقلل حجم الملف بنسبة تصل إلى 70٪.

XML (لغة التوصيف الموسعة) هو تنسيق ملف يسمح بإنشاء رسومات ثنائية الأبعاد ديناميكية عبر الصور المتجهة. ملف SVG هو ملف ضخم لأنه مضغوط. كثيرًا ما يستخدمه مصممو الويب لإنشاء صور متحركة وشعارات GIF. إذا كان الملف كبيرًا جدًا ، فسيؤدي ذلك إلى تأخير تحميل صفحة الويب ، بالإضافة إلى تثبيط عزيمة المشاهدين. يمكن للمستخدمين ضغط أحجام ملفات SVG مجانًا باستخدام WorkinTool File Compressor. يمكنك أيضًا استخدام هذا البرنامج لضغط تنسيقات الصور والفيديو الأخرى بالإضافة إلى ضغط SVG. يمكنك أيضًا استخدام ضغط PPT وضغط PDF وضغط Word بالإضافة إلى ضغط PPT.

من الممكن تقليل حجم ملف SVG ، ولكن يمكنك أيضًا ضبط مستوى الجودة وضغطه إلى الحجم الذي تفضله ، مثل MB أو KB. WorkinTool File Compress قادر على ضغط الملفات في أي فئة ، بما في ذلك الصور ومقاطع الفيديو ، في محاولة واحدة. يمكنك تحميل الصور إلى مواقع الويب والتطبيقات بكل سهولة باستخدام هذه الميزة.

خيارات ضغط ملف Svg

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

ما هو الفرق بين Svg و Svg مضغوط؟

يتم تقديم نوعي الملفات svg (نص عادي) و svgz (مضغوط) بنفس نوع MIME. هناك فرق كبير بين رأس Content-Encoding ورأس Content-Type ، اللذين يمثلان أنواع المحتوى الذي يتم تقديمه.

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

كيفية ضغط ملفات Svg

لا يزال من الممكن تحقيق جودة الرسوم عن طريق تحويل ملف SVG إلى تنسيق مضغوط . من الجيد أيضًا ضغط الملفات قبل إرسالها لتوفير المساحة.

ضغط كود Svg

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

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

يمكن أن يساعدك دليل Amelia Wattenberger الجميل لتوسيع نطاق SVG في معرفة المزيد حول viewBox. يمكن استخدام Xlink: href في الترميز الخاص بك لتحديد المسار الذي تريد رسمه مباشرة. قد تبدو المسارات مخيفة ، لكن الخطوط المستقيمة أقل خطورة. يستخدم هذا المثال CSS لإضافة قيمة لون إلى الفئات المرتبطة برواد الفضاء المنسوخين. نتيجة لذلك ، يمكنني بسهولة تغيير مثيلات هذا العنصر في مثيل واحد.

هل يمكنك تصغير Svg؟

تصغير SVG أصغر بنسبة 22٪ * من المنافسة. تعمل تقنية Nano على تحسين SVG إلى حجم صغير جدًا عن طريق ضغطها (إن وجدت) وتضمينها في خطوة واحدة ، مما يقلل من سير العمل وأوقات التحميل مع تقليل النطاق الترددي ووقت التحميل أيضًا.

مثال على ملف Svg

ملف SVG هو نوع من ملفات الرسومات التي تستخدم تنسيق رسوم متجه ثنائي الأبعاد. يعتمد التنسيق على XML ويمكن أن يحتوي على رسوم متجهية وصور نقطية ونص. غالبًا ما يتم استخدامه لرسومات الويب ويمكن تحريكه أو التفاعل مع عناصر أخرى على الصفحة.

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

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

لماذا تعتبر ملفات Svg هي أفضل تنسيق للرسومات والرسوم التوضيحية على مواقع الويب

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

محول ملف Svg

محول ملفات SVG هو برنامج يحول ملفات SVG إلى تنسيق ملف آخر. عادةً ما يتم تحويل ملفات SVG إلى تنسيق PDF أو PNG.

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

Svg: تنسيق ملف رسومات موجهة قابلة للتطوير

إنه اختصار لـ Vector Graphics ، تنسيق ملف يسمح لك بإنشاء رسومات عالية الجودة. في الماضي ، تم استخدام SVG بشكل أساسي لإنشاء صور يمكن تصغيرها دون فقدان الجودة ؛ ومع ذلك ، فقد أصبح الآن أكثر شيوعًا لإنشاء الشعارات والأيقونات وتصميمات الرسوم.
لتحويل ملف an.sva إلى ملف a.jsp ، افتحه في برنامج تصميم الرسوم المفضل لديك واختر خيار التصدير. إذا اخترت JPG كنوع ملفك ، فأنت جاهز للعمل.

تصغير حجم ملف Svg في Illustrator

هناك عدة طرق مختلفة لتقليل حجم ملف SVG في Illustrator. إحدى الطرق هي الانتقال إلى لوحة "إعدادات المستند" وتغيير إعداد "الضغط" إلى "بلا". سيؤدي ذلك إلى زيادة حجم الملف ، ولكنه سيجعل الملف أكثر توافقًا مع البرامج الأخرى. هناك طريقة أخرى لتقليل حجم الملف وهي الانتقال إلى "تحرير> تفضيلات> كتابة" وتغيير إعداد " استخدام الضغط " إلى "لا". سيؤدي ذلك إلى تصغير حجم الملف ، لكنه قد لا يكون متوافقًا مع البرامج الأخرى.

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

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

يمكن العثور على الأوامر النسبية والمطلقة الأقصر في مزيج من الأوامر النسبية والمطلقة. يمكنك إنشاء عدد كامل من وحدات البكسل التي تم إنشاؤها باستخدام وضع التقاط البكسل في Illustrator. نظرًا لأن SVGs يمكنها فقط وضع حدود في منتصف المسار ، فإن Illustrator سيضع الإحداثيات تلقائيًا في منتصف المسافة بين وحدات البكسل عند استخدام حد 1 أو 3 أو أي رقم فردي آخر.