إذا استخدمنا SVG في mobile_logo، فسيتم تغيير حجمه بشكل غير صحيح:
يمكنني (وسأفعل) التبديل إلى PNG في الوقت الحالي، ولكن أفضل عدم القيام بذلك!
بافتراض أنه يمكن أيضًا إصلاحه بتعديل CSS، ولكن لا يمكن أن أكون الشخص الوحيد الذي يحاول القيام بذلك.
إعجابَين (2)
أستخدم شعار SVG ولم أواجه مشاكل في التحجيم. ربما لا أفهم المشكلة، هل هي أنها صغيرة جدًا؟
أود فقط ملاحظة نسبة العرض إلى الارتفاع 3:1 كما هو مقترح في الإعدادات
هل يحتوي شعار SVG الخاص بك على شفافية مفرطة تحيط بالشعار؟
يطلب نسبة عرض إلى ارتفاع أكبر من 3:1. يعمل ملف PNG بنفس الأبعاد بشكل جيد، لذا تتعلق هذه المشكلة تحديدًا بالتعامل مع SVG.
كـ SVG لا، إنه متجه وليس له مفهوم حقيقي للحجم في هذا السياق. نفس الملف يتم عرضه بشكل جيد كشعار للموقع.
الصورة في لقطة الشاشة الخاصة بي هي اختبار بعد اكتشاف المشكلة على موقع إنتاجي. قمت بإنشاء نص قابل للمقارنة، وحولته إلى مخططات تفصيلية وصدّرت الكائن. إذا كان للملف أي مشاكل، فسيتم ملاحظتها أيضًا في شعار الموقع. لا توجد مساحة إضافية:
بالنظر إلى هذا عن كثب، يتعامل موقعك مع شعار SVG بشكل مختلف، ربما من خلال السمة:
بينما يعمل هذا الموقع بواحد من الإعدادات الافتراضية، ويبدو كالتالي:
يبدو أن شعارك تم إنتاجه بواسطة Inkscape وتم ترميز الأبعاد بشكل ثابت داخل الملف. هذا ليس نموذجيًا لجميع مولدات SVG:
مقابل
إذا كان يعمل مع عرض سطح المكتب، فنحن بحاجة فقط إلى معالجة مماثلة لشعار الهاتف المحمول.
3 إعجابات
هل تتحدث عن منتدى وشعار @piffy؟ لا أجد هذه المعلومات مقدمة في الموضوع، هذا مربك بعض الشيء 
هل يمكنك تقديم “شعار SVG التجريبي” الخاص بك حتى أتمكن من إلقاء نظرة؟
إعجاب واحد (1)
نعم - لقد أشاروا إلى موقعهم لذلك قارنت كمرجع.
لا يُسمح بملفات SVG عند النشر على meta. إليك المصدر:
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.88 11.02">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="m1.93,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z" />
<path class="cls-1" d="m5.15,5.8c.02,1.43.94,2.01,1.99,2.01.76,0,1.21-.13,1.61-.3l.18.76c-.37.17-1.01.36-1.93.36-1.79,0-2.85-1.18-2.85-2.93s1.03-3.13,2.72-3.13c1.9,0,2.4,1.67,2.4,2.73,0,.22-.02.38-.04.49h-4.08Zm3.09-.76c.01-.67-.28-1.71-1.46-1.71-1.07,0-1.54.98-1.62,1.71h3.08Z" />
<path class="cls-1" d="m10.43,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z" />
<path class="cls-1" d="m16.6,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z" />
<path class="cls-1" d="m21.7,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z" />
<path class="cls-1" d="m27,2.71l1.14,3.26c.19.53.35,1.01.47,1.49h.04c.13-.48.3-.96.49-1.49l1.13-3.26h1.1l-2.28,5.8h-1.01l-2.21-5.8h1.13Z" />
<path class="cls-1" d="m37.24,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z" />
<path class="cls-1" d="m41.5,0h1.06v8.52h-1.06V0Z" />
<path class="cls-1" d="m49.58,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z" />
<path class="cls-1" d="m55.92,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z" />
<path class="cls-1" d="m62.88,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z" />
</svg>
إعجابَين (2)
شكرًا!
يمكنني إعادة إنتاج المشكلة.
سطح المكتب:
الهاتف المحمول:
يتم تحديد حجم الشعار بواسطة
.d-header .title {
min-width: 36px;
}
وسيتم تعيينه إلى 0 إذا لم يتم تحديد حجم بشكل ثابت في كود SVG على ما يبدو. على سبيل المثال، قمت بإزالة قيم العرض والارتفاع من شعار Discourse، وهذه هي النتيجة:
لا أفهم لماذا يعمل على سطح المكتب في هذه الحالة.
إعجابَين (2)
لقد حاولت تحديد المشكلة وأعتقد أنني اكتشفتها.
يوجد ملف SVG داخل عنصر ابن في صندوق مرن \u003ca class=\"title\"\u003e والذي لن ينمو حسب المحتوى افتراضيًا. بدون تعيين أبعاد لملف SVG، فإنه لا يرى “سببًا” للنمو، وبالتالي فإن العرض الافتراضي هو 0 بكسل.
إذا سمحت لحاوية الشعار بالنمو، فسيؤدي ذلك إلى حل المشكلة:
.d-header .title:not(.title--minimized) {
overflow: hidden;
flex-grow: 1; // added
}
4 إعجابات
شكراً على الشرح المفصل! بالفعل استخدمت Inkscape. وضع موقعي في الوضع الآمن يعطي نفس تنسيق CSS لذلك لا أعتقد أنه من سمة أو إضافة:
بغض النظر، يبدو أن تنسيق CSS هو مجرد تمويه وأن أبعاد SVG هي السبب هنا. تمكنت أيضًا من تكرار مشكلتك عن طريق إزالة الأبعاد.
سأقوم باختبار هذا المزيد قليلاً، ولكن يبدو أنه حل جيد… شكراً لك على إيجاده. قلقي الرئيسي بشأن flex-grow هو كيف يمكن أن يتفاعل مع عناصر الرأس الشقيقة التي تضاف أحيانًا في السمات، ولكنه يبدو أنه يعمل بشكل جيد افتراضيًا!
هذه المشكلة لا تحدث على سطح المكتب لأن لدينا ارتفاعًا محددًا
.d-header #site-logo {
height: 2.667em;
}
على الهاتف المحمول، نفترض أن الشعار أكبر من المساحة المتاحة، ونقيده ليناسب:
.d-header #site-logo {
max-height: 2.4em;
max-width: 100%;
}
لذلك، تُعطى رسومات SVG عديمة الأبعاد على سطح المكتب بُعدًا في CSS، وعلى الهاتف المحمول نسمح للشعار بتحديد حجمه (يحدده max-height أو max-width، أيهما يأتي أولاً). لذلك، نظرًا لعدم وجود أبعاد ولا توجيه للنمو بشكل أكبر، فإنه يظل صغيرًا (كما يمليه min-width على .title، وبدونه يكون غير مرئي!).
حل ممكن آخر هو تحديث max-height للشعار على الهاتف المحمول إلى height. سيكون ذلك متسقًا مع كيفية التعامل مع الشعارات على سطح المكتب.
من المحتمل أن أضع إصلاحًا لهذه المشكلة غدًا، ولكن في غضون ذلك، فإن إضافة أبعاد إلى SVG هو حل سهل، ولا يجب أن يكون بُعدًا دقيقًا… إذا أضفت width="1000" ولا شيء آخر، فسوف ينمو ليناسب المساحة وسيكون حجمه الأقصى مقيدًا بواسطة CSS.
إعجابَين (2)
الجزء الصعب هو أن التطبيق الذي كان ينتج رسومات SVG عديمة الأبعاد هو Illustrator. لقد استخدمت PNG في الوقت الحالي فقط، وسيتم إصلاح ذلك قريبًا. لا أستطيع تخيل أن أطلب من أي شخص رمي متجهاته في محرر نصوص لتعديلها 
هاها
3 إعجابات
نعم، أعتقد أن هذه هي نقطة ملفات SVG عدم امتلاك أبعاد، لكنها أضافت تعقيدًا بسيطًا لم تكن علامات الصور تمتلكه سابقًا!
يمكن تصديرها من Illustrator بأبعاد إذا تم إلغاء تحديد المربع “متجاوب” في نافذة خيارات SVG (هذا من ملف → تصدير → تصدير باسم):
(مشكلة أخرى واجهتها يمكن تجنبها في نافذة التصدير… إذا كنت تقوم بتضمين صورة SVG مباشرة على الصفحة كترميز، فيمكن أن يساعد أيضًا في تبديل النمط إلى “مضمن”، وإلا فإن الأنماط من ملفات SVG المختلفة يمكن أن تتعارض لأنها ستستخدم على الأرجح نفس أسماء فئات Illustrator)
3 إعجابات
يمكنني محاولة إخبارهم بأنهم يفعلون ذلك بشكل خاطئ، ولكن هذا على الأرجح لن يجيب على سبب كونه جيدًا على سطح المكتب وليس على الهاتف المحمول 
إعجابَين (2)
لقد قمت للتو بدمج إصلاح هنا سيحل هذه المشكلة، ويجعل تنسيق CSS لشعار سطح المكتب/الجوال أكثر اتساقًا بشكل عام
3 إعجابات
رائع، شكرًا @awesomerobot
4 إعجابات
تم إغلاق هذا الموضوع تلقائيًا بعد يومين. لم تعد الردود الجديدة مسموح بها.