Как создать рамку вокруг изображения с использованием CSS или SVG и вставить изображение внутрь рамки?

Если вам нужно создать рамку вокруг изображения с использованием CSS, то можно использовать следующий пример:

HTML:
```html
<div class="image-container">
  <img src="path/to/image.jpg" alt="Image">
</div>
```

CSS:
```css
.image-container {
  border: 2px solid black; /* задаем рамку черного цвета шириной 2 пикселя */
  padding: 10px; /* добавляем отступ внутри рамки */
}

img {
  width: 100%; /* изображение займет 100% ширины контейнера */
  height: auto; /* сохраняем пропорции изображения */
}
```

Если нужно использовать SVG для создания рамки вокруг изображения, то можно создать SVG-элемент с прямоугольником, который будет служить рамкой, и поместить изображение внутрь этого прямоугольника. Вот пример:

```html
<svg width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="none" stroke="black" stroke-width="2" /> <!-- прямоугольник-рамка -->
  <image href="path/to/image.jpg" x="10" y="10" width="180" height="180" /> <!-- изображение внутри рамки -->
</svg>
```

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

Если правильно понял вопрос, то самый простой вариант - нарисовать рамки с прозрачным фоном под картинки. Далее положить под них картинки для слайдера задав нижний слой через index-z. Это позволит менять картинки слайдера не нарушая контур рамок. 
 Сами рамки можно нарисовать в svg тут svgedit.netlify.app