ﻻ يمكنني تغيير حجم صور svg في CSS

ايقونات الsvg تعمل بشكل مختلف عن الصور مثل ال.png, .jpg , حيث عند تغيير خواص الحجم مايحدث فقط أنك تقوم بتغيير حجم المربع الحامل للأيقون, عند الحاجة لتغيير الحجم يجب عليك تغيير ملف الsvg نفسه, إفتحه في محرر الأكواد الخاص بك ستجده عبارة عن كود xml كما في هذا الشكل

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="309.000000pt" height="275.000000pt" viewBox="0 0 309.000000 275.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,275.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1275 2565 c-273 -37 -507 -162 -707 -373 -150 -160 -245 -344 -294
-567 -24 -111 -24 -360 0 -470 59 -268 181 -477 386 -660 307 -273 770 -366
1165 -233 346 116 632 398 748 738 46 135 62 233 62 390 0 357 -135 653 -406
895 -252 225 -606 329 -954 280z m400 -60 c112 -23 185 -50 297 -107 499 -254
738 -843 556 -1373 -132 -387 -448 -664 -858 -752 -116 -25 -334 -25 -450 0
-116 25 -189 51 -301 108 -629 321 -813 1135 -383 1699 55 73 195 206 264 251
137 91 309 158 470 184 106 18 296 13 405 -10z"/>
<path d="M1695 1440 l-390 -390 -201 201 c-165 165 -205 200 -225 197 -17 -2
-25 -10 -27 -28 -2 -21 35 -62 222 -248 193 -193 226 -222 242 -214 11 6 203
195 428 420 375 376 407 411 397 431 -26 48 -44 33 -446 -369z"/>
</g>
</svg>

سنركز الأن على الجزأ العلوي في الملف

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="309.000000pt" height="275.000000pt" viewBox="0 0 309.000000 275.000000"
 preserveAspectRatio="xMidYMid meet">

تﻻحظ وجود خاصيتين width و height, قم بتغييرهم للقيمة التي تريد الحصول عليها.

وأريد الإضافة أن نفس المشكلة ستقابلك إن حاولت تغيير لون الأيقونة, حيث يجب عليك تعديل لون الأيقونة أيضاً من نفس الملف, حيث ستﻻحظ وجود وسم إسمه path 

<path d="M1275 2565 c-273 -37 -507 -162 -707 -373 -150 -160 -245 -344 -294
-567 -24 -111 -24 -360 0 -470 59 -268 181 -477 386 -660 307 -273 770 -366
1165 -233 346 116 632 398 748 738 46 135 62 233 62 390 0 357 -135 653 -406
895 -252 225 -606 329 -954 280z m400 -60 c112 -23 185 -50 297 -107 499 -254
738 -843 556 -1373 -132 -387 -448 -664 -858 -752 -116 -25 -334 -25 -450 0
-116 25 -189 51 -301 108 -629 321 -813 1135 -383 1699 55 73 195 206 264 251
137 91 309 158 470 184 106 18 296 13 405 -10z"/>

ستقوم بإضافة خاصية تسمى fill وتضع فيها إسم اللون الذي تريده ولكن بصيغة السادس عشر hexa code 

<path fill="#fff" d="M1275 2565 c-273 -37 -507 -162 -707 -373 -150 -160 -245 -344 -294
-567 -24 -111 -24 -360 0 -470 59 -268 181 -477 386 -660 307 -273 770 -366
1165 -233 346 116 632 398 748 738 46 135 62 233 62 390 0 357 -135 653 -406
895 -252 225 -606 329 -954 280z m400 -60 c112 -23 185 -50 297 -107 499 -254
738 -843 556 -1373 -132 -387 -448 -664 -858 -752 -116 -25 -334 -25 -450 0
-116 25 -189 51 -301 108 -629 321 -813 1135 -383 1699 55 73 195 206 264 251
137 91 309 158 470 184 106 18 296 13 405 -10z"/>

وتلك مقالة قد تجدها مفيدة إن أردت معرفة المزيد عن ملفات الsvg وإستعمالها في الويب

يمكن تعديل حجم Svg بطريقة غير مباشرة، مثل تغيير حجم الحاوية لها أو تغيير أبعاد الخلفية خاصتها

حجم الحاوية:

.mySvgImage img{ width:50%; }

أبعاد الخلفية:

background-size

svg {
  background-size: 20px 30px;
}

استخدام التحويلات transform مع scale:

<g transform="scale(0.5)">
... الصورة
</g>

وضع svg في عنصر img وتغيير أبعاده:

<img width="200px" src="myIcon.svg"/>

سبب عدم القدرة على تعديل svg الأصلي هو حقوق الملكية لها

حتى تستطيع التغيير في حجم الصورة svg من خلال ال css يجب عليك حذف ال width و height كالتالي

قم بتعديل الوسم من 

<svg width="12px" height="20px" viewBox="0 0 12 20" ...

إلى 

<svg viewBox="0 0 12 20" ...

أو يمكنك تغيير الحجم من خلال الخاصية transform scale كالتالي

transform: scale(2);