navid
3 سال پیش توسط navid مطرح شد
8 پاسخ

نحوه کوچک و بزرگ کردن تگ svg

دوستان من توی یه سایت دارم تمرین فرانت اند انجام میدم و این سایت معمولا توی پروژه هاش تگ های svg زیاد داره.وقتی که میخوام برای موبایل و دسکتاپ این svg رو کوچک و بزرگ کنم نمیشه. اگه طول و عرضشو کم کنم یه تیکه از svg میپره .ممنون میشم راهنمایی کنید


ثبت پرسش جدید
محمدرضا شاهدی
@mshahedi83 3 سال پیش مطرح شد
-1

سلام، همانطور که @kazemi گفتند، ممکن است مشکل به خاطر نداشتن viewbox بوده باشد، کد زیر را امتحان کنید:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 52" width="50" height="auto">
   <g fill="#FFF" fill-rule="evenodd">
      <path d="M0 16.372v.128l29.754 13.764 29.859-13.811v-.035L29.754 2.608 0 16.372zm10.727.064l19.028-8.802 19.03 8.802-19.031 8.801-19.027-8.801zM29.754 35.61L0 22.052v5.014l29.754 13.59L59.613 27.02v-5.015L29.754 35.61zm0 10.17L0 32.22v5.015l29.754 13.591L59.613 37.19v-5.014L29.754 45.78zM169.216 26.22a8.564 8.564 0 0 0-2.285-5.892 7.675 7.675 0 0 0-2.473-1.768 7.259 7.259 0 0 0-3.015-.636 7.259 7.259 0 0 0-3.015.636 7.674 7.674 0 0 0-2.473 1.768 8.565 8.565 0 0 0-2.285 5.893 8.564 8.564 0 0 0 2.285 5.893 7.674 7.674 0 0 0 2.473 1.767 7.258 7.258 0 0 0 3.015.637 7.258 7.258 0 0 0 3.015-.637 7.675 7.675 0 0 0 2.473-1.767 8.563 8.563 0 0 0 2.285-5.893zm6.784 0c0 2.044-.377 3.937-1.13 5.681a13.849 13.849 0 0 1-3.11 4.526c-1.319 1.273-2.866 2.279-4.64 3.017-1.775.739-3.667 1.108-5.677 1.108s-3.894-.37-5.653-1.108a14.659 14.659 0 0 1-4.617-3.04 14.116 14.116 0 0 1-3.11-4.55c-.753-1.744-1.13-3.622-1.13-5.633 0-1.98.385-3.842 1.154-5.586a14.718 14.718 0 0 1 3.133-4.573 14.457 14.457 0 0 1 4.617-3.064c1.759-.739 3.627-1.108 5.606-1.108 2.01 0 3.902.369 5.677 1.108 1.774.738 3.321 1.744 4.64 3.017 1.32 1.272 2.356 2.789 3.11 4.549.753 1.76 1.13 3.645 1.13 5.657zm-31.422 13.483a9.087 9.087 0 0 1-1.814.613 9.217 9.217 0 0 1-2.096.236c-1.005 0-1.971-.134-2.898-.4a6.347 6.347 0 0 1-2.426-1.297c-.69-.597-1.24-1.375-1.649-2.334-.408-.958-.612-2.113-.612-3.465V.717h6.925v31.16c0 1.132.228 1.91.683 2.334.456.425.997.637 1.625.637.786 0 1.54-.236 2.262-.707v5.562zM130.02 12.55l-12.249 32.386c-.91 2.42-2.104 4.164-3.58 5.233-1.476 1.068-3.235 1.603-5.277 1.603a8.4 8.4 0 0 1-1.036-.071 7.784 7.784 0 0 1-1.083-.212l-2.262-6.317a8.974 8.974 0 0 0 1.65.59 6.61 6.61 0 0 0 1.6.211c1.069 0 2.042-.243 2.922-.73.879-.488 1.554-1.391 2.025-2.711l.943-2.734-10.506-27.248h7.396l6.266 17.536 5.889-17.536h7.302zm-28.502-4.102H83.806v8.769h17.478v5.94H83.806v16.688h-7.16V2.179h24.873v6.27z"/>
   </g>
</svg>

برای کوچک و بزرگ کردن هم برای اینکه نسبت عرض و ارتفاع حفظ شود، width یا height را روی auto قرار دهید و دیگری را تغییر دهید؛ مثلا در کد بالا height="auto" است و با تغییر دادن width فایل SVG بزرگ و کوچک می شود.


فاطمه کاظمی زاده
تخصص : Senior front-end در هولدینگ دک...
@kazemi 3 سال پیش مطرح شد
0

توی تگ svg فقط اتریبیوت viewbox را نگه دارین. بعد توسط سی اس اس کنترلش کنین

خودم کاری که انجام میدم اول یه کد کلی برای همه ی svg ها می نویسم:

svg {
width: 25px;
height: 25px;
}

بعد هر قسمت از سایت رو به svg ها اندازه ی مشخص بدید و با سی اس اس کنترلش کنین


navid
@navid.khab 3 سال پیش مطرح شد
0
  <svg width="176" height="52" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="evenodd"><path d="M0 16.372v.128l29.754 13.764 29.859-13.811v-.035L29.754 2.608 0 16.372zm10.727.064l19.028-8.802 19.03 8.802-19.031 8.801-19.027-8.801zM29.754 35.61L0 22.052v5.014l29.754 13.59L59.613 27.02v-5.015L29.754 35.61zm0 10.17L0 32.22v5.015l29.754 13.591L59.613 37.19v-5.014L29.754 45.78zM169.216 26.22a8.564 8.564 0 0 0-2.285-5.892 7.675 7.675 0 0 0-2.473-1.768 7.259 7.259 0 0 0-3.015-.636 7.259 7.259 0 0 0-3.015.636 7.674 7.674 0 0 0-2.473 1.768 8.565 8.565 0 0 0-2.285 5.893 8.564 8.564 0 0 0 2.285 5.893 7.674 7.674 0 0 0 2.473 1.767 7.258 7.258 0 0 0 3.015.637 7.258 7.258 0 0 0 3.015-.637 7.675 7.675 0 0 0 2.473-1.767 8.563 8.563 0 0 0 2.285-5.893zm6.784 0c0 2.044-.377 3.937-1.13 5.681a13.849 13.849 0 0 1-3.11 4.526c-1.319 1.273-2.866 2.279-4.64 3.017-1.775.739-3.667 1.108-5.677 1.108s-3.894-.37-5.653-1.108a14.659 14.659 0 0 1-4.617-3.04 14.116 14.116 0 0 1-3.11-4.55c-.753-1.744-1.13-3.622-1.13-5.633 0-1.98.385-3.842 1.154-5.586a14.718 14.718 0 0 1 3.133-4.573 14.457 14.457 0 0 1 4.617-3.064c1.759-.739 3.627-1.108 5.606-1.108 2.01 0 3.902.369 5.677 1.108 1.774.738 3.321 1.744 4.64 3.017 1.32 1.272 2.356 2.789 3.11 4.549.753 1.76 1.13 3.645 1.13 5.657zm-31.422 13.483a9.087 9.087 0 0 1-1.814.613 9.217 9.217 0 0 1-2.096.236c-1.005 0-1.971-.134-2.898-.4a6.347 6.347 0 0 1-2.426-1.297c-.69-.597-1.24-1.375-1.649-2.334-.408-.958-.612-2.113-.612-3.465V.717h6.925v31.16c0 1.132.228 1.91.683 2.334.456.425.997.637 1.625.637.786 0 1.54-.236 2.262-.707v5.562zM130.02 12.55l-12.249 32.386c-.91 2.42-2.104 4.164-3.58 5.233-1.476 1.068-3.235 1.603-5.277 1.603a8.4 8.4 0 0 1-1.036-.071 7.784 7.784 0 0 1-1.083-.212l-2.262-6.317a8.974 8.974 0 0 0 1.65.59 6.61 6.61 0 0 0 1.6.211c1.069 0 2.042-.243 2.922-.73.879-.488 1.554-1.391 2.025-2.711l.943-2.734-10.506-27.248h7.396l6.266 17.536 5.889-17.536h7.302zm-28.502-4.102H83.806v8.769h17.478v5.94H83.806v16.688h-7.16V2.179h24.873v6.27z"/></g></svg>

@kazemi این اصلااتربیوت view box نداره


فاطمه کاظمی زاده
تخصص : Senior front-end در هولدینگ دک...
@kazemi 3 سال پیش مطرح شد
1

اگه viewbox نداشته باشه کلا بهم میریزه
شاید دلیلش این باشه


محمدرضا شاهدی
@mshahedi83 3 سال پیش مطرح شد
-1

سلام، همانطور که @kazemi گفتند، ممکن است مشکل به خاطر نداشتن viewbox بوده باشد، کد زیر را امتحان کنید:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 52" width="50" height="auto">
   <g fill="#FFF" fill-rule="evenodd">
      <path d="M0 16.372v.128l29.754 13.764 29.859-13.811v-.035L29.754 2.608 0 16.372zm10.727.064l19.028-8.802 19.03 8.802-19.031 8.801-19.027-8.801zM29.754 35.61L0 22.052v5.014l29.754 13.59L59.613 27.02v-5.015L29.754 35.61zm0 10.17L0 32.22v5.015l29.754 13.591L59.613 37.19v-5.014L29.754 45.78zM169.216 26.22a8.564 8.564 0 0 0-2.285-5.892 7.675 7.675 0 0 0-2.473-1.768 7.259 7.259 0 0 0-3.015-.636 7.259 7.259 0 0 0-3.015.636 7.674 7.674 0 0 0-2.473 1.768 8.565 8.565 0 0 0-2.285 5.893 8.564 8.564 0 0 0 2.285 5.893 7.674 7.674 0 0 0 2.473 1.767 7.258 7.258 0 0 0 3.015.637 7.258 7.258 0 0 0 3.015-.637 7.675 7.675 0 0 0 2.473-1.767 8.563 8.563 0 0 0 2.285-5.893zm6.784 0c0 2.044-.377 3.937-1.13 5.681a13.849 13.849 0 0 1-3.11 4.526c-1.319 1.273-2.866 2.279-4.64 3.017-1.775.739-3.667 1.108-5.677 1.108s-3.894-.37-5.653-1.108a14.659 14.659 0 0 1-4.617-3.04 14.116 14.116 0 0 1-3.11-4.55c-.753-1.744-1.13-3.622-1.13-5.633 0-1.98.385-3.842 1.154-5.586a14.718 14.718 0 0 1 3.133-4.573 14.457 14.457 0 0 1 4.617-3.064c1.759-.739 3.627-1.108 5.606-1.108 2.01 0 3.902.369 5.677 1.108 1.774.738 3.321 1.744 4.64 3.017 1.32 1.272 2.356 2.789 3.11 4.549.753 1.76 1.13 3.645 1.13 5.657zm-31.422 13.483a9.087 9.087 0 0 1-1.814.613 9.217 9.217 0 0 1-2.096.236c-1.005 0-1.971-.134-2.898-.4a6.347 6.347 0 0 1-2.426-1.297c-.69-.597-1.24-1.375-1.649-2.334-.408-.958-.612-2.113-.612-3.465V.717h6.925v31.16c0 1.132.228 1.91.683 2.334.456.425.997.637 1.625.637.786 0 1.54-.236 2.262-.707v5.562zM130.02 12.55l-12.249 32.386c-.91 2.42-2.104 4.164-3.58 5.233-1.476 1.068-3.235 1.603-5.277 1.603a8.4 8.4 0 0 1-1.036-.071 7.784 7.784 0 0 1-1.083-.212l-2.262-6.317a8.974 8.974 0 0 0 1.65.59 6.61 6.61 0 0 0 1.6.211c1.069 0 2.042-.243 2.922-.73.879-.488 1.554-1.391 2.025-2.711l.943-2.734-10.506-27.248h7.396l6.266 17.536 5.889-17.536h7.302zm-28.502-4.102H83.806v8.769h17.478v5.94H83.806v16.688h-7.16V2.179h24.873v6.27z"/>
   </g>
</svg>

برای کوچک و بزرگ کردن هم برای اینکه نسبت عرض و ارتفاع حفظ شود، width یا height را روی auto قرار دهید و دیگری را تغییر دهید؛ مثلا در کد بالا height="auto" است و با تغییر دادن width فایل SVG بزرگ و کوچک می شود.


فاطمه کاظمی زاده
تخصص : Senior front-end در هولدینگ دک...
@kazemi 3 سال پیش مطرح شد
0

دقت داشته باشید که اتریبیوت viewbox چیزی نیست که بشه دستی درستش کرد. حتما باید با ایکن مطابقت داشته باشه. یا از طراح بخواین که آیکن های مناسب در اختیار شما بزاره یا ایکن مشابه رو در سایتهایی مثل iconfinder پیدا کنین و از svg مناسب استفاده کنید


محمدرضا شاهدی
@mshahedi83 3 سال پیش آپدیت شد
0

@kazemi
سلام، من خیلی در این زمینه اطلاعات ندارم، اما وقتی کد چند فایل SVG را بررسی کردم، متوجه شدم انگار دو عدد آخر در viewbox همان ابعاد صفحه هستند، برای همین من هم ابعاد صفحه (که باید اندازه ابعاد طرح، یا کمی بیشتر از آن باشد) را جای آنها قرار دادم و مثلا نمی دانم چرا دو عدد اول 0 هستند، اما دو عدد دوم احتمالا به ترتیب (از چپ به راست) عرض و ارتفاع صفحه هستند.

الآن متوجه شدم در این لینک درباره viewbox و مقادیر آن توضیح داده شده است.


navid
@navid.khab 3 سال پیش مطرح شد
0

@mshahedi83 این کد رو که میزنم اصلا دیگه نشون نمیده svg رو


محمدرضا شاهدی
@mshahedi83 3 سال پیش مطرح شد
0

@navid.khab
سلام، چون من رنگش را تغییر ندادم و رنگش سفید بوده است، اگر پس زمینه اش یک رنگ تیره باشد، SVG مشخص می شود.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام