كيفية تصغير أيقونات SVG للحصول على موقع ويب أو تطبيق يتم تحميله بشكل أسرع

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

أستخدم Inkscape ، محرر رسومات متجه مجاني ومفتوح المصدر ، لإنشاء صور SVG. بعد سنوات من البحث ، اكتشفت كيفية حفظ الملفات بتنسيق SVG المحسن. تم تصغير الحجم الإجمالي لـ 62 SVGs من 459 بايت إلى 208897 بايت ، أي تقليل بنسبة 53٪. حدث التطور النهائي لدائرتنا بمساعدة أداة مصممة لتحسين SVGs: 102 بايت.

كيف يمكنني التحكم في حجم Svg؟

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

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

ViewBox هو الجزء الأخير من اللغز الذي ينشئ Scalable Vector Graphics ، وهو برنامج لإنشاء رسومات متجهة. يعد عنصر viewBox أحد العناصر الموجودة في العنصر> svg>. لتحويلها إلى قيمة ، اطرح x من y وقسم النتيجة على مسافة بيضاء أو فاصلات: x ، y ، العرض ، الارتفاع. في الزاوية اليسرى العلوية لإطار العرض ، يحدد هذان الحرفان نظام إحداثيات. لملء الارتفاع المتاح ، يتم حسابه على أنه عدد الإحداثيات / المسارات الزائفة التي تحتاج إلى قياس. إذا حددت أبعادًا لا تتوافق مع نسبة العرض إلى الارتفاع ، فلن يتم تمديد الصورة أو تشويهها. باستخدام خاصية CSS الجديدة الملائمة للكائنات ، يمكنك إجراء نفس الضبط لأي نوع صورة آخر.

بالإضافة إلى ذلك ، يمكنك تحديد خيار saveRatioAspect = ”none“ الذي يسمح لصورتك بالحجم إلى نفس حجم الصورة النقطية. يمكن تعيين عرض أو ارتفاع الصور النقطية ، ويمكن أيضًا مطابقة المقياس. كيف يمكن لـ SVG فعل ذلك؟ كل شيء معقد. يمكنك البدء باستخدام التحجيم التلقائي للصورة مع صورة في ملف> img> ، لكنك ستحتاج إلى اختراقها قليلاً قبل أن تتمكن من القيام بذلك بشكل صحيح. يمكنك التحكم في نسبة العرض إلى الارتفاع لعنصر ما عن طريق ضبط ارتفاعه وهامشه باستخدام مجموعة متنوعة من خصائص CSS. ستقوم المتصفحات الأخرى تلقائيًا بضبط حجم الصورة إلى 300 * 150 إذا تم تمكين viewBox ؛ لم يتم تحديد هذا السلوك في HTML.

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

يمكنك تحقيق ذلك بإحدى طريقتين. عيّن أبعاد ملف SVG كخيار أول. سيظهر بيان الأبعاد في بداية ملف SVG الخاص بك. يجب تحديد سمات (أو أبعاد) العرض والارتفاع المطلوبة. تأكد من حفظ ملف .svg. إذا قمت بتحديد الخيار 2 ، يمكنك اختيار أبعاد ملف Illustrator الخاص بك. لتصدير SVG الخاص بك ، يمكنك استخدام ملف PNG. في ملف PNG الخاص بك ، يمكنك تحديد بيان الأبعاد. يجب حفظ ملف PNG الذي قمت بحفظه. يمكنك تغيير حجم ملف Illustrator بتحديد الخيار الثالث. إنه لأمر جيد أن يكون لدينا بعض المال لأنه سيكون عامًا صعبًا. في Illustrator ، يمكنك التصدير كملف بتحديد ملف ، تصدير باسم. انتقل إلى نافذة Export As وحدد علامة التبويب SVG. يمكن النقر فوق ملف PNG بتحديده من نافذة تنسيق ملف SVG المنبثقة. بالنقر فوق الزر "ملف" ، حفظ باسم ، يمكنك الآن حفظ الملف كنوع. بالنقر فوق الزر Save As ، يمكنك إدخال اسم الملف الذي تريد استخدامه لملف SVG ثم حفظه.

ماذا يفعل Viewbox في Svg؟

يحدد ViewBox أبعاد وموضع إطار عرض SVG في مساحة المستخدم. تتكون سمة viewBox من أربعة أرقام: min-x و min-y و width و height.

رسومات Svg: أداة Viewbox

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

هل يمكن أن يكون Svgs بأي حجم؟

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

هل يؤدي تحجيم صورة Svg إلى تدهور جودة الصورة؟

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

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

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

صور Svg: الحل لمشكلات تغيير الحجم

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

مصلح SVG

SVG-fixer هي أداة بسيطة يمكنها مساعدتك في إصلاح ملفات SVG المعطلة . يمكن أن يساعدك أيضًا في تحسين ملفات SVG للحصول على أداء أفضل.

ملفات Svg: أفضل طريقة لمشاركة الرسومات مع فريقك

عندما تحتاج إلى مشاركة رسم مع فريقك ، فإن Microsoft 365 يتضمن برامج مثل Microsoft Word و PowerPoint و Outlook و Excel. يمكن استخدام البرامج لإدراج وتحرير رسومات متجهة قابلة للتطوير. من الممكن ضغط ملفات SVG باستخدام برنامج مثل ضغط ملف SVG . ستكون قادرًا على نقل وتخزين بياناتك بهذه الطريقة.