Как уменьшить картинку SVG?

Question

Модуль блога подключен к Yii2 в vendore, в CSS прописано: .grid-view td > img {max-width: 50px; } но все равно размер заглушки не уменьшается(

Blog.php

<?php
namespace medeyacom\blog\models;
use common\components\behaviors\StatusBehavior;
use Yii;
use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\db\Expression;
use yii\web\UploadedFile;
use yii\helpers\Url;
use yii\helpers\ArrayHelper;
use common\models\ImageManager;
use common\models\User;
/**

This is the model class for table "blog".

@property integer $id
@property string $title
@property string $image
@property string $text
@property string $date_create
@property string $date_update
@property string $url
@property integer $status_id
@property integer $sort

*/
class Blog extends ActiveRecord {
const STATUS_LIST = ['off','on'];
  const IMAGES_SIZE = [
        ['50','50'],
        ['800',null],
    ];
  public $tags_array;
  public $file;
/**
 * @inheritdoc
 */

public static function tableName()
    {
        return 'blog';
    }
public function behaviors()
{
     return [
     'timestampBehavior'=&gt;[
        'class' =&gt; TimestampBehavior::className(),
        'createdAtAttribute' =&gt; 'date_create',
        'updatedAtAttribute' =&gt; 'date_update',
        'value' =&gt; new Expression('NOW()'),
        ],
        'statusBehavior'=&gt; [
        'class' =&gt; StatusBehavior::className(),
        'statusList'=&gt; self::STATUS_LIST,
          ]
     ];
  }
/**
 * @inheritdoc
 */
public function rules()
{
    return [
        [['title', 'url'], 'required'],
        [['text'], 'string'],
        [['url'], 'unique'],
        [['status_id', 'sort'], 'integer'],
        [['sort'], 'integer','max'=&gt;99, 'min'=&gt;1],
        [['title', 'url'], 'string', 'max' =&gt; 150],
        [['image'], 'string', 'max' =&gt; 100],
        [['image'], 'file', 'extensions'=&gt;'jpg, gif, png, svg'],
        [['file'], 'image'],
        [['tags_array','date_create','date_update'],'safe'],

    ];
}

/**
 * @inheritdoc
 */
public function attributeLabels()
{
    return [
        'id' =&gt; 'ID',
        'title' =&gt; 'Заголовок',
        'text' =&gt; 'Текст',
        'url' =&gt; 'ЧПУ',
        'status_id' =&gt; 'Статус',
        'sort' =&gt; 'Сортировка',
        'date_update' =&gt; 'Обновлено',
        'date_create' =&gt; 'Создано',
        'tags_array' =&gt; 'Тэги',
        'tagsAsString' =&gt; 'Тэги',
        'image' =&gt; 'Картинка',
        'file' =&gt; 'Картинка',
        'author.username'=&gt;'Имя Автора',
        'author.email'=&gt;'Почта Автора',

    ];
}

public function getAuthor () {
  return $this-&gt;hasOne (User::className(),['id'=&gt;'user_id']);

}
 public function getImages()
{
    return $this-&gt;hasMany(ImageManager::className(), ['item_id' =&gt; 'id'])-&gt;andWhere(['class'=&gt;self::tableName()])-&gt;orderBy('sort');
}

  public function getImagesLinks()
{
    return ArrayHelper::getColumn($this-&gt;images,'imageUrl');
}

 public function getImagesLinksData()
{
    return ArrayHelper::toArray($this-&gt;images,[
            ImageManager::className() =&gt; [
                'caption'=&gt;'name',
                'key'=&gt;'id',
            ]]
    );
}
 public function getBlogTag () {
  return $this-&gt;hasMany(BlogTag::className(),['blog_id'=&gt;'id']);
}

 public function getTags()
{
  return $this-&gt;hasMany(Tag::className(),['id'=&gt;'tag_id'])-&gt;via('blogTag');
}

  public function getTagsAsString() 
{  
   $arr = \yii\helpers\ArrayHelper::map($this-&gt;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-&gt;tags_array = $this-&gt;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-&gt;tags,'id','id');
  foreach ($this-&gt;tags_array as $one) {
   if(!in_array($one,$arr)){
      $model = new BlogTag();
      $model-&gt;blog_id = $this-&gt;id;
      $model-&gt;tag_id = $one;
      $model-&gt;save();
  }
  if(isset($arr[$one])) {
     unset ($arr[$one]);
  }
  }
   BlogTag::deleteAll(['tag_id'=&gt;$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'=&gt;$this-&gt;id]);

           return true;
        } else {
            return false;
        }
    }

}

~~CSS~~ SVG

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500.00001 500.00001"><path d="M205.787 493.568c-157.9-26.504-246.857-201.682-177.6-349.744 85.36-182.49 351.91-185.57 441.307-5.098 91.224 184.158-60.92 388.88-263.707 354.842zm99.038-34.836c31.25-8.674 79.184-34.717 83.206-45.21 1.277-3.325-294.462-301.13-299.04-301.13-4.517 0-20.218 22.372-30.804 43.89-80.533 163.703 72.113 350.89 246.64 302.45zM104.843 349.065c-12.468-6.225-12.476-6.275-12.476-86.468 0-79.512.01-79.59 11.773-86.543 22.78-13.467 90.532 44.178 82.108 69.86-18.68 56.95 48.65 115.263 92.877 80.437 1.935-1.523 5.993 1.415 16.55 11.98 13.537 13.55-165.074 23.595-190.832 10.735zm317.906 29.113c106.74-135.61 2.872-340.836-172.5-340.836-53.517 0-128.95 27.877-137.784 50.92-1.275 3.326 294.464 301.132 299.042 301.132 1.326 0 6.385-5.047 11.24-11.216zm-69.57-66.325c-38.348-38.527-38.348-38.527-40.446-50.23-5.747-32.08-27.69-53.273-60.536-58.47-8.16-1.29-46.78-34.694-46.78-40.46 0-19.49 64.18-15.8 93.36 5.367 5.686 4.124 8.767 4.804 21.77 4.804 19.174 0 20.825-.705 23.314-9.954 2.97-11.043 19.437-10.66 19.437.45 0 6.112 5.592 9.504 15.666 9.504 28.496 0 29.164 2.062 29.164 90.088 0 77.795.06 77.264-9.657 84.927-5.184 4.088-6.06 3.39-45.294-36.027zm-85.502-132.226c12.81-13.055 2.866-26.27-19.77-26.27-20.12 0-29.718 7.925-24.914 20.57 4.056 10.677 35.824 14.73 44.684 5.7z" fill="#cbcbcb"/></svg>

Возможный дубликат вопроса: Не работает css-класс — Qwertiy, Sep 08 '17 at 15:05
@Sandro_s добавьте еще в вопрос код svg изображения — Alexandr_TT, Sep 08 '17 at 15:07
"Не работает css-класс " -это не мой вопрос, там про цвет, у меня про размер и в yii2 по другому все немного. Код Blog.php добавлю и скрин. Строчка в css уже есть в вопросе. — Sandro_s, Sep 08 '17 at 15:26

score 4 · Accepted Answer · edited Sep 08 '17 at 17:23

4

Откройте svg-файл в редакторе, в строчках: width и height укажите тот размер, который вам нужен. Затем сохраните этот файл, возможно под другим именем.

edited Sep 08 '17 at 17:23

0xdb

51,614

answered Sep 08 '17 at 15:49

Ruby7

76

все работает теперь) – Sandro_s Sep 08 '17 at 15:50

Alexandr_TT · Answer 2 · 2017-09-09T20:40:50.840

в CSS прописано: .grid-view td > img {max-width: 50px; } но все равно размер заглушки не уменьшается

У вас в svg файле скорее всего прописан только viewBox="0 0 48 48", без указания viewport (нет width="X" height="Y").
Это делается для адаптивности (отзывчивости) svg изображения. При этом способе svg изображение заполняет всё допустимое свободное пространство, либо полностью родительский контейнер, либо окно браузера при отсутствии контейнера.
svg изображение при этом меняет свой размер при изменении размера окна браузера.

Пример с указанием только viewBox

svg адаптивно

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 48 48" >
<g>
 <path fill="#5E35B1" d="M33.9,12.1H14.2L17.6,7c0.4-0.6,1-0.9,1.7-0.9h9.6c0.7,0,1.3,0.3,1.7,0.9L33.9,12.1z"/>
 <path fill="#5E35B1" d="M14,11H8V9.2C8,8.5,8.5,8,9.2,8h3.6C13.5,8,14,8.5,14,9.2V11z"/>
 <path fill="#5E35B1" d="M40,42H8c-2.2,0-4-1.8-4-4V14c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4v24C44,40.2,42.2,42,40,42z"/>
</g>
<g>
 <g>
  <path fill="#E8EAF6" d="M34,25c0-5.5-4.5-10-10-10c-2.4,0-4.6,0.8-6.3,2.2l1.2,1.6c1.4-1.1,3.1-1.8,5.1-1.8c4.4,0,8,3.6,8,8h-3.5    l4.5,5.6l4.5-5.6H34z"/>
 </g>
 <g>
  <path fill="#E8EAF6" d="M29.1,31.2C27.7,32.3,25.9,33,24,33c-4.4,0-8-3.6-8-8h3.5L15,19.4L10.5,25H14c0,5.5,4.5,10,10,10    c2.4,0,4.6-0.8,6.3-2.2L29.1,31.2z"/>
 </g>
</g>
</svg>

Добавлением viewport можно регулировать размер svg:

При соотношении viewport / viewBox = 1 изображение воспроизводится 1:1
viewport / viewBox > 1 изображение увеличивается
viewport / viewBox < 1 изображение уменьшается
подробнее здесь

Пример с одновременным указанием viewport и viewBox

svg теряет адаптивность

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="96"  viewBox="0 0 48 48" >
<g>
 <path fill="#5E35B1" d="M33.9,12.1H14.2L17.6,7c0.4-0.6,1-0.9,1.7-0.9h9.6c0.7,0,1.3,0.3,1.7,0.9L33.9,12.1z"/>
 <path fill="#5E35B1" d="M14,11H8V9.2C8,8.5,8.5,8,9.2,8h3.6C13.5,8,14,8.5,14,9.2V11z"/>
 <path fill="#5E35B1" d="M40,42H8c-2.2,0-4-1.8-4-4V14c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4v24C44,40.2,42.2,42,40,42z"/>
</g>
<g>
 <g>
  <path fill="#E8EAF6" d="M34,25c0-5.5-4.5-10-10-10c-2.4,0-4.6,0.8-6.3,2.2l1.2,1.6c1.4-1.1,3.1-1.8,5.1-1.8c4.4,0,8,3.6,8,8h-3.5    l4.5,5.6l4.5-5.6H34z"/>
 </g>
 <g>
  <path fill="#E8EAF6" d="M29.1,31.2C27.7,32.3,25.9,33,24,33c-4.4,0-8-3.6-8-8h3.5L15,19.4L10.5,25H14c0,5.5,4.5,10,10,10    c2.4,0,4.6-0.8,6.3-2.2L29.1,31.2z"/>
 </g>
</g>
</svg>

Чтобы иметь возможность регулировать начальный размер svg изображения и не терять при этом адаптивность, необходимо указывать width и height viewport в процентах:

Пример с одновременным указанием viewport и viewBox с сохранением адаптивности:

width="10%" height="10%"  viewBox="0 0 48 48"

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10%" height="10%"  viewBox="0 0 48 48" >
<g>
 <path fill="#5E35B1" d="M33.9,12.1H14.2L17.6,7c0.4-0.6,1-0.9,1.7-0.9h9.6c0.7,0,1.3,0.3,1.7,0.9L33.9,12.1z"/>
 <path fill="#5E35B1" d="M14,11H8V9.2C8,8.5,8.5,8,9.2,8h3.6C13.5,8,14,8.5,14,9.2V11z"/>
 <path fill="#5E35B1" d="M40,42H8c-2.2,0-4-1.8-4-4V14c0-2.2,1.8-4,4-4h32c2.2,0,4,1.8,4,4v24C44,40.2,42.2,42,40,42z"/>
</g>
<g>
 <g>
  <path fill="#E8EAF6" d="M34,25c0-5.5-4.5-10-10-10c-2.4,0-4.6,0.8-6.3,2.2l1.2,1.6c1.4-1.1,3.1-1.8,5.1-1.8c4.4,0,8,3.6,8,8h-3.5    l4.5,5.6l4.5-5.6H34z"/>
 </g>
 <g>
  <path fill="#E8EAF6" d="M29.1,31.2C27.7,32.3,25.9,33,24,33c-4.4,0-8-3.6-8-8h3.5L15,19.4L10.5,25H14c0,5.5,4.5,10,10,10    c2.4,0,4.6-0.8,6.3-2.2L29.1,31.2z"/>
 </g>
</g>

UPD 10.09.2017

Вариант svg автора вопроса с изменениями для обеспечения адаптивности

<svg xmlns="http://www.w3.org/2000/svg" width="15%" height="15%" viewBox="0 0 500.00001 500.00001"><path d="M205.787 493.568c-157.9-26.504-246.857-201.682-177.6-349.744 85.36-182.49 351.91-185.57 441.307-5.098 91.224 184.158-60.92 388.88-263.707 354.842zm99.038-34.836c31.25-8.674 79.184-34.717 83.206-45.21 1.277-3.325-294.462-301.13-299.04-301.13-4.517 0-20.218 22.372-30.804 43.89-80.533 163.703 72.113 350.89 246.64 302.45zM104.843 349.065c-12.468-6.225-12.476-6.275-12.476-86.468 0-79.512.01-79.59 11.773-86.543 22.78-13.467 90.532 44.178 82.108 69.86-18.68 56.95 48.65 115.263 92.877 80.437 1.935-1.523 5.993 1.415 16.55 11.98 13.537 13.55-165.074 23.595-190.832 10.735zm317.906 29.113c106.74-135.61 2.872-340.836-172.5-340.836-53.517 0-128.95 27.877-137.784 50.92-1.275 3.326 294.464 301.132 299.042 301.132 1.326 0 6.385-5.047 11.24-11.216zm-69.57-66.325c-38.348-38.527-38.348-38.527-40.446-50.23-5.747-32.08-27.69-53.273-60.536-58.47-8.16-1.29-46.78-34.694-46.78-40.46 0-19.49 64.18-15.8 93.36 5.367 5.686 4.124 8.767 4.804 21.77 4.804 19.174 0 20.825-.705 23.314-9.954 2.97-11.043 19.437-10.66 19.437.45 0 6.112 5.592 9.504 15.666 9.504 28.496 0 29.164 2.062 29.164 90.088 0 77.795.06 77.264-9.657 84.927-5.184 4.088-6.06 3.39-45.294-36.027zm-85.502-132.226c12.81-13.055 2.866-26.27-19.77-26.27-20.12 0-29.718 7.925-24.914 20.57 4.056 10.677 35.824 14.73 44.684 5.7z" fill="#cbcbcb"/></svg>

Теперь ваше изображение будет выглядеть одинаково, без потери качества и на больших мониторах и на маленьких гаджетах. Пробуйте изменять размеры окна браузера и увидите, что изображение отзывчиво ко всем изменениям.

у меня есть width и height и размеры можно менять. Ruby07 уже ответил как, теперь все работает. — Sandro_s, Sep 09 '17 at 11:51

score 0 · Answer 3 · answered Sep 08 '17 at 15:53

0

Для тега Img укажите ширину так

<img width="69" src="sample.source">

answered Sep 08 '17 at 15:53

а где указать в css или blog.php? если в css так: .grid-view td > то не работает – Sandro_s Sep 08 '17 at 16:03
@Sandro_s после таких вопросов можно заканчивать с html/css – Cheg Sep 08 '17 at 17:31
а я только начинаю, но ответ нашёл уже – Sandro_s Sep 08 '17 at 17:36

score 0 · Answer 4 · answered Sep 08 '17 at 19:07

0

Если вставить сам код SVG в html то появится возможность управлять размером, и цветами прямо из css

html

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
    <line x1="17.5" y1="6.5" x2="17.5" y2="6.5"/>
</svg>

css

    svg {
    width: 50px;
    height: 50px;
    stroke: #ffc208;
}

answered Sep 08 '17 at 19:07

Денис

325
2
12

зачем переписывать одно и тоже? уже ответили так – Sandro_s Sep 09 '17 at 11:46
@Sandro_s вы невнимательно прочитали ответы 1. Ruby7 предложил добавить viewport (width и height), но при этом svg изображение теряет адаптивность. Зачем тогда использовать svg, если вам не нужна отзывчивость изображения. Можно было с тем же успехом использовать растровое изображение. 2. Денис предложил использовать задание размеров посредством CSS, но при этом тоже теряется адаптивность. 3.Alexandr_T привел вариант, когда можно изменять начальные размеры svg изображения и при этом svg изображение не теряет адаптивность. И еще -- Sandro_s здесь принято благодарить за помощь. – Alexandr_TT Sep 09 '17 at 13:20
@ Alexandr_T спасибо за отзывчивость, но у меня ваш вариант с адаптивностью не работает. не знаю почему. – Sandro_s Sep 09 '17 at 14:35
@Sandro_s мой последний вариант - Пример с одновременным указанием viewport и viewBox с сохранением адаптивности отличается от вариантаRuby7 только тем, что значения width и height указаны в процентах и это есть основное условие адаптивности. Пробуйте еще раз, настраивая начальный размер svg, подборкой процентов. Посмотрите еще раз внимательно свой код, может забыли где-то кавычку или ещё что-то. И я уже просил вас - приведите код самого svg файла. Вместе разберемся – Alexandr_TT Sep 09 '17 at 14:51
да, действительно, дело только в %) – Sandro_s Sep 09 '17 at 19:52
@Sandro_s смотрите ваш вариант UPD и если решена проблема, то вопрос нужно закрыть - галочка напротив ответа и не забудьте пожалуйста отметить плюсами участников, которые помогли вам разобраться. – Alexandr_TT Sep 09 '17 at 20:47

Как уменьшить картинку SVG?

4 Answers4

UPD 10.09.2017