SVG - التنسيق المثالي للصور المتجهة على الويب

SVG هو اختصار لـ Scalable Vector Graphics. إنه تنسيق رسومات قياسي يُستخدم لعرض الصور المتجهة على الإنترنت. الصور المتجهة هي صور تتكون من سلسلة من النقاط والخطوط والمنحنيات. يمكن زيادتها أو تصغيرها دون فقدان أي جودة. عادةً ما يتم إنشاء صور SVG في برنامج تحرير متجه ، مثل Adobe Illustrator. يمكن تصديرها إلى عدد من تنسيقات الملفات المختلفة ، بما في ذلك PNG و JPG و PDF. 2mo SVG هو تنسيق رسومات متجه مصمم خصيصًا للاستخدام على الويب. يعتمد على مواصفات SVG 1.1. 2mo SVG هو تنسيق مفتوح يمكن لأي شخص استخدامه. لا توجد قيود الترخيص. 2mo SVG مدعوم من قبل جميع المتصفحات الرئيسية ، بما في ذلك Internet Explorer و Firefox و Safari و Chrome. 2mo SVG هو خيار رائع لعرض الصور المتجهة على الويب. إنه فعال وسهل الاستخدام.

ما هو حجم ملف Svg؟

ملف SVG هو ملف Scalable Vector Graphics. إنه نوع من ملفات الصور المتجهة التي تستخدم خوارزميات رياضية لوصف الصور. تتمثل ميزة ملف SVG في أنه يمكن تغيير حجمه إلى أي حجم دون فقدان الجودة.

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

في كثير من الحالات ، يكون من المفيد تضمين viewbox والحفاظ على سماتspectRatio في SVG. سيؤدي ذلك إلى تقليل حجم لوح الرسم وجعله يشبه الشعار أو الرسم. يمكن تحجيم الملف باستخدام تنسيق ملف svg في محرر نصي.

إنه تنسيق رسومي متجه يمكن تحجيمه دون فقد الدقة عند قياسه. نظرًا لأنه يمكن تحجيمها ، فإننا نستخدم viewBox كطريقة لتوسيع نطاق الصورة. 0 0 100 100 نظام إحداثيات به x = 0 ، y = 0 ، العرض ، الارتفاع ، وهو 100 وحدة بالمتر المربع بالقدم المربع. يعد إنشاء رسومات متجهة قابلة للتطوير طريقة ممتازة لاستخدام SVG في مجموعة متنوعة من تطبيقات الويب والجوال.

هل Svgs أصغر من Png؟

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

يمكنه توفير 60٪ -80٪ ​​من عرض النطاق الترددي ، وتوفير جودة صورة أعلى ، وتحميل أسرع. إنه سهل الاستخدام مثل HTML5 وهو مجاني للتثبيت. مُحسَّن لتقليل حجم الملف باستخدام أدوات التحسين الرائدة في الصناعة. يمكن أن يؤدي مقدار التحسينات المطلوبة إلى تقليل حجم الملف بنسبة 70٪ في PNG. نوصي باستخدام العلامة> img> لتضمين SVG ، مما قد يوفر لك الكثير من النطاق الترددي ويسمح للمستخدمين بالتركيز على أشياء أخرى. لا يؤدي ضغط GZip على صور PNG إلى توفير كبير في النطاق الترددي ، إن وجد (تم فك ضغط 6.33 كيلوبايت ، تم فك ضغط 63.84 كيلوبايت). في المقابل ، فإن استخدام SVG مع GZip عند 621B بدلاً من 6.33K يوفر 90٪ من عرض النطاق الترددي. بالمقارنة مع ملفات PNG ، فإن SVG المعقد الذي يستخدم ملفات SVG له حجم ملف كبير وتوفير في النطاق الترددي.

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

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

فوائد صور المتجهات

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

هل يقوم إنكسكيب بضغط الصور؟

لا يحتوي Inkscape على أي إمكانيات مضمنة لضغط الصور. إذا كنت بحاجة إلى ضغط صورة ، فستحتاج إلى استخدام برنامج خارجي.

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