images to svg

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md

@@ -2,7 +2,7 @@ The images ribbon can be represented as `ul/li` list of images `<img>`.
 
 Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
 
-![](carousel1.png)
+![](carousel1.svg)
 
 To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
 
@@ -10,7 +10,7 @@ For `<img>` we should also adjust `display`, because by default it's `inline`. T
 
 To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
 
-![](carousel2.png)
+![](carousel2.svg)
 
 The outer `<div>` has a fixed width, so "extra" images are cut.