$30 off During Our Annual Pro Sale. View Details »

Прекрасный мир графики

Прекрасный мир графики

Доклад о разных графических форматах и о том как их правильно готовить.

Polina Gurtovaya

October 12, 2019
Tweet

More Decks by Polina Gurtovaya

Other Decks in Technology

Transcript

  1. 2

  2. 3

  3. 4

  4. 14

  5. 15

  6. Чтобы везде работало 21 <picture> <source srcset="cupcake.webp 1x, [email protected] 2x"

    type="image/webp" /> <source srcset="cupcake.webp 1x, [email protected] 2x" type="image/jpeg" /> <img src="cupcake.jpg" alt="a yummy cupcake" /> </picture>
  7. Когда SVG заходят хорошо 22 Часть изображения можно представить как

    набор геометрических примитивов Есть интерактивность Нужно цеплять маркеры к фону Нужно много размеров
  8. Берем тестовую картинку unicorn.svg - 12kB После svgo - 5.1kB

    (57.5%) gzip - 2.7kB (77%) webP@2x - 4.7kB (60.8%) webP - 2.2kB (81.7%) 25
  9. Тестовый единорог внутри <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 199”> <g

    stroke-width="2.01"> <path d=“…534z” /> <path d=“…9z” fill="#f19c9b"/> <path d=“…” /> … </svg> 26
  10. <path /> <path d="M215.147 235.789c0-13.921 2.609-31.501 9.735- 40.624 7.126-9.123 16.97-14.765

    27.844-14.765 10.874 0 19.62 7.386 26.746 16.509 7.126 9.123 10.788 21.702 1 0.788 35.623 0 13.921-3.459 22.429-10.585 31.552-7.125 9.122-12.332 13.435-23.205 13.435-10.874 0-23.002-2.0 74-30.127-11.196-7.126-9.123-11.196-16.613-11.196-30.5 34z"/> https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths 27
  11. <path /> 28 M - начало пути L - линия

    (V, H) C - кривая (S, Q, T) A - дуга Z - замыкаем путь
  12. JavaScript - анимации JS - анимации выполняются в том же

    “потоке” что и основной JS requestAnimationFrame — обязательно нужно использовать, но он никогда не сработает если основной поток занят У нас всего 16.666667 ms :) 30
  13. 31

  14. Пример с печенькой <svg xmlns=“…” width="200" height="120" viewBox="0 0 200

    120"> <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="M69.5433628,33.5480878 C65.8626549…”/> </svg> 32
  15. Насколько округлять? 37 Надо учитывать: container size, devicePixelRatio, inner transformations.

    Начитать можно с : 1 знак - контейнер совпадает с размером svg, 2 знака — контейнер в 10 раз больше …etc
  16. Печенька с друзьями <svg xmlns="http://www.w3.org/2000/svg" width="913" height="552"> <g transform="translate(523 128)">

    <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> <g transform="translate(665 236)"> <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> ... </svg> 39
  17. Печенька с друзьями <svg xmlns="http://www.w3.org/2000/svg" width="913" height="552"> <defs> <g id="cookie">

    <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> </defs> <use href="#cookie" transform="translate(521 128)"/> <use href="#cookie" transform="translate(500 236)"/> ... </svg> 40
  18. Сюрпризы внутри SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 319"> <script>console.log('')</script>

    <ellipse cx="282.5" cy="159.5" fill="#FDC970" rx="282.5" ry="159.5"/> <path fill="#794545" d="M196.46 ..." /> </svg> 41
  19. Сюрпризы внутри SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 319"> <image

    height="2388" width="1669" x=".635" xlink:href="data:image/ png;base64,iVBORw0KGgoA..." /> </svg> 42
  20. Как инлайнить SVG import React from "react"; import Logo from

    "./logo.svg"; const App = () => <Logo />; export default App; 43 сreate-react-app использует https:/ /github.com/smooth-code/svgr
  21. Видео кодеки VP8 VP9 AV1 H.264 H.265 49 <video autoplay

    muted> <source src="unicorn.webm" type="video/webm" /> <source src="unicorn.mp4" type="video/mp4" /> </video>
  22. Избегайте страшных звуков :) 51 <video autoplay muted> <source src="unicorn.webm"

    type="video/webm" /> <source src="unicorn.mp4" type="video/mp4" /> </video>
  23. 54

  24. Анимируй - трансформируй (transform) 56 .animated { transform: ... ;

    } Все что делает transform: (translate, rotate, scale, skew) можно описать при помощи матрицы
  25. 57 .transformed { transform: matrix3d( 1, 0, 0, 0, 0,

    1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26. 63 const pathElement = svg.querySelector("path"); const length = pathElement.getTotalLength(); const

    dist = length / numPoints; const points = [...Array(numPoints)].map((_, index) => { const { x, y } = data.getPointAtLength(index * dist); return { transform: `translateX(${3 * x}px) translateY(${3 * y}px)` }; }); fish.animate(points, { duration: 15000, iterations: Infinity }); setPathLen(length);
  27. 64 const data = ref.current.querySelector("path"); const length = data.getTotalLength(); const

    dist = length / numPoints; const points = [...Array(numPoints)].map((_, index) => { const { x, y } = data.getPointAtLength(index * dist); return { transform: `translateX(${3 * x}px) translateY(${3 * y}px)` }; }); const keyFrames = `@keyframes fly { ${points .map( (point, index) => `${((index * 100) / numPoints).toFixed(2)}% { transform: ${ point.transform }; }` ) .join("\n")} }`; setPathLen(length);
  28. 67

  29. Процессинг и трансформация изображений • Обрезать картинку • Обнаружить предмет

    • Применить затейливый фильтр (cместить цвета, etc) • Что-нибудь измерить 68 При помощи <canvas /> можно:
  30. Путь к успеху Добавьте осознанности к процессу Используйте правильные инструменты

    Сравнивайте результаты Не бойтесь экспериментировать Почитайте спец. литературу :) 74