Как изменить размер svg в css
Несмотря на то, что масштабируемая векторная графика svg отличается от прочих форматов изображений, на нее распространяются те же правила масштабирования, что и для прочих видов изображений. Для того чтобы задать необходимый размер картинки нужно воспользоваться свойствами: width — ширина картинки, height — высота картинки:
.img width: 32px; height: 32px; > Как изменить размер SVG
Вроде бы простая задача — изменить размер SVG изображения, пропорционально его ужав, но тут бывают подводные камни.
Столкнулся с очень навороченным логотипом в формате svg, который никак не хотел адаптироваться. Изменение же width и hight, через сss, обрезало у него края.
Мне помог такой вариант:
svg.logo g
— обратите внимание, что притеняться transform нужно не к svg, а именно к элементу «обертки».
Онлайн SVG Компрессор
Этот простой компрессор SVG позволяет быстро сжимать векторные SVG изображения без потери качества.
Разрешение (DPI)
Страницы в черно-белом
Выбрать для всех %s файлов
Перетащите файлы сюда
Время хранения файлов прошло
Понравилось? Поделись!
Как уменьшить размер SVG файла
- 1 Для начала просто загрузите свои SVG файлы в область компрессора.
- 2 Затем нажмите кнопку «Сжать» и дождитесь завершения сжатия.
- 3 Это все! Теперь вы можете скачать ваши сжатые SVG файлы одним архивом.
SVG (Scalable Vector Graphics)
SVG — это масштабируемый векторный графический формат изображений, написанный на языке разметки XML. Файл SVG выглядит одинаково хорошо как на мобильных устройствах так и на компьютерах. Изображения SVG могут быть как статичными, так и анимированными. Одним из наиболее распространенных применений для этого формата является иконки и логотипы, во многом благодаря поддержке в SVG прозрачности и возможности увеличения без потери качества. При изменении масштаба svg изображения всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации. При использовании SVG для простых изображений, он не займет много места, однако он плохо подходит для сложных изображений с большим количеством деталей.
Тип файла: Изображение
Расширение: .svg
Разработчик: W3C
Дата выпуска: 4 сентября 2001 г.
Как уменьшить картинку SVG?
Модуль блога подключен к Yii2 в vendore, в CSS прописано: .grid-view td > img 
Blog.php
public function behaviors() < return [ 'timestampBehavior'=>[ 'class' => TimestampBehavior::className(), 'createdAtAttribute' => 'date_create', 'updatedAtAttribute' => 'date_update', 'value' => new Expression('NOW()'), ], 'statusBehavior'=> [ 'class' => StatusBehavior::className(), 'statusList'=> self::STATUS_LIST, ] ]; > /** * @inheritdoc */ public function rules() < return [ [['title', 'url'], 'required'], [['text'], 'string'], [['url'], 'unique'], [['status_id', 'sort'], 'integer'], [['sort'], 'integer','max'=>99, 'min'=>1], [['title', 'url'], 'string', 'max' => 150], [['image'], 'string', 'max' => 100], [['image'], 'file', 'extensions'=>'jpg, gif, png, svg'], [['file'], 'image'], [['tags_array','date_create','date_update'],'safe'], ]; > /** * @inheritdoc */ public function attributeLabels() < return [ 'id' =>'ID', 'title' => 'Заголовок', 'text' => 'Текст', 'url' => 'ЧПУ', 'status_id' => 'Статус', 'sort' => 'Сортировка', 'date_update' => 'Обновлено', 'date_create' => 'Создано', 'tags_array' => 'Тэги', 'tagsAsString' => 'Тэги', 'image' => 'Картинка', 'file' => 'Картинка', 'author.username'=>'Имя Автора', 'author.email'=>'Почта Автора', ]; > public function getAuthor () < return $this->hasOne (User::className(),['id'=>'user_id']); > public function getImages() < return $this->hasMany(ImageManager::className(), ['item_id' => 'id'])->andWhere(['class'=>self::tableName()])->orderBy('sort'); > public function getImagesLinks() < return ArrayHelper::getColumn($this->images,'imageUrl'); > public function getImagesLinksData() < return ArrayHelper::toArray($this->images,[ ImageManager::className() => [ 'caption'=>'name', 'key'=>'id', ]] ); > public function getBlogTag () < return $this->hasMany(BlogTag::className(),['blog_id'=>'id']); > public function getTags() < return $this->hasMany(Tag::className(),['id'=>'tag_id'])->via('blogTag'); > public function getTagsAsString() < $arr = \yii\helpers\ArrayHelper::map($this->tags,'id','name'); return implode (', ',$arr); > public function getSmallImage() < if($this->image)< $path = str_replace('admin.','',Url::home(true)).'uploads/images/blog/50x50/'.$this->image; >else < $path = str_replace('admin.','', Url::home(true)).'uploads/images/nophoto.svg'; >return $path; > public function afterFind() < parent::afterFind(); $this->tags_array = $this->tags; > public function beforeSave ($insert) < if ($file = UploadedFile::getInstance($this,'file')) < $dir = Yii::getAlias('@images').'/blog/'; if (!is_dir($dir . $this->image)) < if (file_exists($dir.$this->image))< unlink($dir.$this->image); > if (file_exists($dir.'50x50/'.$this->image)) < unlink($dir.'50x50/'.$this->image); > if (file_exists($dir. '800x/'.$this->image)) < unlink($dir.'800x/'.$this->image); > > $this->image = strtotime ('now').'_'.Yii::$app->getSecurity()->generateRandomString(6) .'.'. $file->extension; $file ->saveAs($dir.$this->image); $imag = Yii::$app->image->load($dir.$this->image); $imag ->background ('#fff',0); $imag ->resize ('50','50', Yii\image\drivers\Image::INVERSE); $imag ->crop ('50','50'); $imag ->save($dir.'50x50/'.$this->image, 90); $imag = Yii::$app->image->load($dir.$this->image); $imag->background('#fff',0); $imag->resize('800',null, Yii\image\drivers\Image::INVERSE); $imag->save($dir.'800x/'.$this->image, 90); > return parent::beforeSave($insert); > public function afterSave ($insert, $changedAttributes) < parent::afterSave($insert, $changedAttributes); $arr = \yii\helpers\ArrayHelper::map($this->tags,'id','id'); foreach ($this->tags_array as $one) < if(!in_array($one,$arr))< $model = new BlogTag(); $model->blog_id = $this->id; $model->tag_id = $one; $model->save(); > if(isset($arr[$one])) < unset ($arr[$one]); >> BlogTag::deleteAll(['tag_id'=>$arr]); > public function beforeDelete() < if (parent::beforeDelete()) < $dir = Yii::getAlias('@images').'/blog/'; if(file_exists($dir.$this->image))< unlink($dir.$this->image); > foreach (self::IMAGES_SIZE as $size)< $size_dir = $size[0].'x'; if($size[1] !== null) $size_dir .= $size[1]; if(file_exists($dir.$this->image))< unlink($dir.$size_dir.'/'.$this->image); > > BlogTag::deleteAll(['blog_id'=>$this->id]); return true; > else < return false; >> >