DevGang
Авторизоваться

Войти на сайт

Вконтакте
Facebook
GitHub
Google

Использование SVG в React 

В мире создания хорошего внешнего вида веб-сайтов изображения, особенно изображения, очень важны. Они составляют большую часть (60 %) того, что вы видите в Интернете, делая веб-сайты более интересными и помогая обмениваться информацией. Среди множества инструментов, которые используют разработчики, выделяется React SVG. Это как супергерой для размещения на веб-сайтах крутой и масштабируемой графики, особенно масштабируемой векторной графики (SVG).

Когда разработчики хотят создавать потрясающие веб-сайты и делать крутые вещи, им нужна графика, которая может меняться и хорошо вписываться. React SVG, который представляет собой специальный инструмент в мире React, помогает разработчикам очень легко использовать масштабируемую векторную графику (SVG).

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

Что такое SVG?​

Содержимое или код файла SVG представляет собой HTML-код, так же, как другие файлы изображений, такие как JPG, PNG, GIFS и т.д., имеют свои кодировки и формат соответственно. Весь код SVG заключен в один svg элемент. Содержимое или код SVG представляет собой широкий набор элементов, предназначенных для создания, рисования и компоновки векторных изображений и диаграмм.

<svg>...</svg>

Мы видели, что SVG представляют собой HTML-код, поэтому их можно отображать в браузере. Теперь ими можно манипулировать с помощью CSS и JavaScript. Мы можем получить экземпляр, svg используя API DOM, например document.querySelector, и манипулировать им с помощью JavaScript. Мы также можем стилизовать его с помощью CSS.

Экземпляр объекта svg также доступен в DOM, это файл HTMLSVGElement. Это делается для того, чтобы показать вам, что браузер распознает элемент svg HTML как элемент.

const svg = document.querySelector("svg");
console.log(svg instanceof HTMLSVGElement); // true

По сути, изображения SVG — это HTML. Таким образом, они могут быть отображены в браузере. Теперь массив элементов SVG можно отображать только внутри svg блока, они могут отображаться и вне его, но браузер будет видеть его как пользовательский элемент. Так что это имеет значение только внутри svg кода. Использование SVG весьма универсально. SVG можно использовать для:

  • Рисования текстовых эффектов
  • Анимаций. Большинство анимаций в браузере выполняются с использованием SVG.
  • Рисования визуализации данных, например диаграммы и столбца. Charts.js использует SVG для рисования диаграмм.
  • Визуализации поля дизайна пользовательского интерфейса. Figma использует SVG для рендеринга всех тех проектов, которые мы на ней делаем, и все эти перетаскивания — это проекты SVG.
  • 3D графика. Эта библиотека под названием Three.js использует SVG для рендеринга 3D-графики в браузере.
  • Может выступать в качестве заменяющего изображения или заполнителя для лениво загружаемых изображений. Это связано с тем, что файлы SVG очень малы по размеру и могут очень быстро отображаться в браузере.

Импорт SVG-файлов​

В проекте React существует несколько подходов к импорту файлов SVG, каждый из которых имеет свои преимущества и варианты использования. Вот несколько распространенных методов.

Импорт как компонент React:​

При таком подходе вы можете импортировать файлы SVG непосредственно как компоненты React. Файлы SVG имеют .svg расширение, поэтому их можно импортировать, как и любой другой файл JavaScript. Этот метод позволяет вам рассматривать SVG как компоненты React, что упрощает манипулирование ими и их стилизацию с использованием возможностей React.

Допустим, у нас есть SVG-код, который мы хотим использовать в нашем приложении React:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
</svg>

Теперь мы хотим использовать это как файл в нашем приложении React. Мы можем сделать это, создав файл с именем MySvg.svg и вставив в него приведенный выше код.

src/icons/circle.svg
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
</svg>

Затем мы можем импортировать его в наше приложение React следующим образом:

import { ReactComponent as CircleSvg } from "./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <CircleSvg />;
};

Вот CircleSvg специальный синтаксис импорта, который поставляется с Create React App Webpack. Он позволяет импортировать файлы SVG как компоненты React. После импорта мы сможем использовать его как компонент React в нашем JSX. Код внутри файла SVG вообще не является компонентом React, но как только мы импортируем его с помощью import, он автоматически преобразуется в компонент React.

Использование img тега

Мы также можем использовать традиционный <img> тег HTML для отображения SVG. Этот подход прост и подходит для простых случаев использования.

import CircleSvg from "./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <img src={CircleSvg} alt="My SVG" />;
};

Здесь мы импортируем файл SVG и используем его в качестве src атрибута тега <img>. Вышеупомянутое будет преобразовано в это:

<img src="data:image/svg+xml,%3csvg..." alt="My SVG" />

Минусы этого подхода заключаются в том, что стилизация и манипулирование SVG могут быть ограничены. Например, мы не можем изменить цвет SVG с помощью CSS. Мы можем изменить цвет SVG только с помощью fill атрибута тега <img>.

import CircleSvg from "./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <img src={CircleSvg} alt="My SVG" fill="red" />;
};

Здесь мы используем fill атрибут тега <img> для изменения цвета SVG. Это единственный способ изменить цвет SVG с помощью <img> тега. Мы не можем использовать CSS для изменения цвета SVG.

Встроенный SVG​

Встроенный SVG предполагает непосредственное встраивание разметки SVG в ваш компонент React. Этот подход обеспечивает больший контроль над стилями и манипуляциями непосредственно внутри компонента.

import React from "react";

// Usage in JSX
const MyComponent = () => {
  return (
    <div>
      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
      </svg>
    </div>
  );
};

Здесь мы напрямую встраиваем код SVG в наш компонент React. Мы просто скопировали содержимое файла SVG и вставили его в наш компонент React. Он отображается непосредственно как элемент HTML. Здесь у нас есть полный контроль над SVG. Мы можем манипулировать им с помощью CSS и JavaScript. Мы также можем использовать React для управления им.

Этот метод подходит для небольших встроенных SVG-файлов и дает вам прямой контроль над каждым элементом. Минусы в том, что код SVG может быть большим, и в итоге мы получим раздутый размер файла компонента. Кроме того, SVG становится сложно поддерживать, и мы можем избежать этого, если воспользуемся библиотекой react-svg.

С использованием react-svg​

Библиотека [react-svg](https://www.npmjs.com/package/react-svg) дает нам возможность встраивать встроенные SVG, сохраняя при этом возможность манипулировать встроенными SVG.

npm install react-svg

Экспортирует react-svg компонент ReactSVG. Компонент имеет реквизит src, который получает встроенный SVG.

import { ReactSVG } from "react-svg";

<ReactSVG src="circle.svg" />;

Здесь импортируйте ReactSVG компонент и передайте URL-адрес файла circle.svg в src реквизит. Есть много полезных реквизитов, которые мы можем передать в файл ReactSVG. Мы можем запросить компонент для кэширования SVG, мы можем прикрепить к SVG обработчик кликов и многое другое.

Используя **react-svg-loader** или **svg-react-loader**.

Существуют специальные загрузчики, такие как react-svg-loader или svg-react-loader которые позволяют напрямую импортировать файлы SVG и использовать их в качестве компонентов React.

import CircleSvg from "svg-react-loader!./icons/circle.svg";

// Usage in JSX
const MyComponent = () => {
  return <CircleSvg />;
};

Убедитесь, что эти загрузчики установлены (npm install --save-dev react-svg-loader или npm install --save-dev svg-react-loader) и настроены в вашей настройке сборки.

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

Стилизация SVG в React​

Мы видели способы импорта и использования SVG в React. Теперь давайте посмотрим, как можно стилизовать SVG в React.

Использование SVG в компонентах React обычно используется для добавления масштабируемой графики. Существует несколько методов стилизации SVG, чтобы они соответствовали остальному интерфейсу. Вот краткое изложение имеющихся у вас вариантов стилизации SVG в React:

Встроенные стили​

Вы можете динамически изменять стиль элементов SVG, передавая объект стиля непосредственно компоненту SVG.

const MySvgComponent = () => (
    <svg style={{ fill: "blue", width: "50px", height: "50px" }}>
      {/* paths, circles, etc. */}
    </svg>
);

Таблицы стилей CSS​

Как и в случае с элементами HTML, SVG можно стилизовать с помощью классов CSS или идентификаторов.

// styles.css
.my-svg {
  fill: blue;
  width: 50px;
  height: 50px;
}

import "./styles.css";

const MySvgComponent = () => (
  <svg className="my-svg">{/* paths, circles, etc. */}</svg>
);

CSS-модули (стили с ограниченной областью действия)​

Если вы используете модули CSS, вы можете импортировать стили из файла, .module.css который автоматически определит имена классов, чтобы избежать конфликтов.

MySvgComponent.module.css
.mySvg {
  fill: blue;
  width: 50px;
  height: 50px;
}

import styles from "./MySvgComponent.module.css";

const MySvgComponent = () => (
  <svg className={styles.mySvg}>{/* paths, circles, etc. */}</svg>
);

Стилизованные компоненты (CSS-in-JS)​

Это популярная библиотека CSS-in-JS, которая позволяет использовать стили на уровне компонентов.

import styled from "styled-components";

const StyledSvg = styled.svg`
  fill: blue;
  width: 50px;
  height: 50px;
`;

const MySvgComponent = () => <StyledSvg>{/_ paths, circles, etc. _/}</StyledSvg>;

Emotion (CSS-in-JS)

Еще одна CSS-in-JS библиотека, функциональность которой аналогична стилизованным компонентам.

/\*_ @jsxImportSource @emotion/react _/
import { css } from '@emotion/react';

const style = css`  fill: blue;
  width: 50px;
  height: 50px;`;

const MySvgComponent = () => (
<svg css={style}>
{/* paths, circles, etc. */}
</svg>
);

Встроенный SVG как JSX​

Если вы импортируете свой SVG как компонент React (используя такой загрузчик @svgr/webpack), вы можете напрямую применять стили к его JSX.

import { ReactComponent as MySvg } from "./mySvg.svg";

const MySvgComponent = () => <MySvg style={{ fill: "blue", width: "50px", height: "50px" }} />;

Управление реквизитами SVG​

Элементы SVG имеют определенные свойства (такие как заливка, обводка, ширина, высота и т. д.), которыми можно управлять в JSX:

const MySvgComponent = ({ color }) => (
  <svg width="50" height="50">
    <circle cx="25" cy="25" r="20" fill={color} />
  </svg>
);

Каждый из этих методов имеет свои варианты использования. Встроенные стили и управление реквизитами SVG отлично подходят для быстрого динамического изменения стилей, а таблицы стилей CSS, модули CSS и библиотеки CSS-in-JS предлагают больше возможностей и гибкости, особенно если у вас сложные стили или вы хотите, чтобы ваши стили были организованы и были модульными.

Динамические SVG​

Динамические SVG в React могут предоставить пользователям богатые и интерактивные возможности. SVG (масштабируемая векторная графика) — это формат векторных изображений на основе XML для двумерной графики с поддержкой интерактивности и анимации. Используя React, вы можете создавать интерактивные элементы SVG, которые реагируют на ввод пользователя, изменения состояния или реквизита. Вот концептуальное руководство о том, как это сделать:

Инициализация состояния и реквизита​

Начните с решения, какие аспекты вашего SVG должны быть динамичными. Например, вы можете захотеть динамически изменить цвет, размер или положение элемента SVG. Вы можете использовать перехватчик useState для управления значениями состояния внутри ваших компонентов, а также передавать реквизиты для настройки компонентов из родительского компонента.

const [color, setColor] = useState("blue");

Создание SVG-компонентов​

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

const MyCircle = ({ color }) => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill={color} />
  </svg>
);

Добавление интерактивности​

Прикрепите к элементам SVG обработчики событий, такие как onClick, onMouseOver, onMouseOutи т.д., чтобы сделать их интерактивными.

const InteractiveCircle = () => {
  const [color, setColor] = useState("blue");

  const changeColor = (newColor) => setColor(newColor);

  return (
    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        strokeWidth="3"
        fill={color}
        onMouseOver={() => changeColor("green")}
        onMouseOut={() => changeColor("blue")}
      />
    </svg>
  );
};

Анимация SVG-элементов​

Вы можете использовать анимацию CSS или API веб-анимации для анимации элементов SVG. Хук useEffect в React можно использовать для запуска анимации при изменении определенных состояний или реквизитов.

useEffect(() => {
  // Trigger animation logic when 'color' changes
}, [color]);

Составление SVG-компонентов​

Более крупная графика SVG может состоять из более мелких компонентов SVG, что позволяет повторно использовать логику и упростить базу кода.

const App = () => (
  <svg width="200" height="200">
    <MyCircle color="blue" />
    <MyCircle color="red" />
  </svg>
);

Использование сторонних библиотек​

Доступно несколько библиотек, которые упрощают работу с SVG в React. Например, d3-react-svg, сочетает в себе возможности D3.js и React для создания визуализации данных.

Анимация с использованием SVG в React​

Анимация SVG в React может значительно улучшить взаимодействие с пользователем, предоставляя визуально привлекательный способ передать изменения или привлечь внимание к определенным частям пользовательского интерфейса. Давайте рассмотрим некоторые шаги и некоторые соображения по реализации SVG-анимации в React:

Создайте или импортируйте SVG​

Вы можете создавать SVG с помощью программного обеспечения для графического дизайна или напрямую писать разметку SVG. Затем SVG можно импортировать в компонент React либо как компонент React с использованием JSX, либо как файл, если вы используете такие инструменты, как Create React App, которое поддерживает импорт SVG.

Пример SVG как JSX в компоненте React:

const MySVG = () => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
  </svg>
);

Импорт SVG как модуля:

import { ReactComponent as MySVG } from "./my-svg.svg";

const MyComponent = () => (
  <div>
    <MySVG />
  </div>
);

Базовые CSS-анимации​

Для простых анимаций вам могут не понадобиться дополнительные библиотеки. CSS можно использовать для анимации свойств SVG, таких как непрозрачность, преобразование или свойства, связанные с обводкой.

Пример использования CSS:

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .my-svg {
      animation: fadeIn 2s ease-in-out infinite;
    }
    const MySVG = () => (
      <svg className="my-svg" width="100" height="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="green"
          strokeWidth="4"
          fill="yellow"
        />
      </svg>
    );

Библиотеки анимации​

Для более сложных или интерактивных анимаций вы можете использовать библиотеку типа react-spring. React Spring — это библиотека для создания интерактивных, управляемых данными и анимированных компонентов пользовательского интерфейса. Он может анимировать HTML, SVG, Native Elements, Three.js и многое другое.

Для использования react-spring вам необходимо установить его:

npm install react-spring

Пример с react-spring:

import { useSpring, animated } from "react-spring";

const AnimatedSVG = () => {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
    config: { duration: 1000 },
  });

  return (
    <animated.svg style={props} width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
    </animated.svg>
  );
};

Интерактивность​

Вы можете комбинировать их react-spring с обработчиками событий React для создания интерактивной анимации. Например, вы можете захотеть, чтобы SVG анимировался, когда пользователь наводит на него курсор или щелкает по нему.

import { useSpring, animated } from "react-spring";

const InteractiveSVG = () => {
  const [animatedProps, set] = useSpring(() => ({
    to: { opacity: 1, transform: "scale(1)" },
    from: { opacity: 0.5, transform: "scale(0.5)" },
  }));

  return (
    <animated.svg
      onMouseEnter={() => set({ opacity: 1, transformText: "scale(1.2)" })}
      onMouseLeave={() => set({ opacity: 1, transform: "scale(1)" })}
      style={animatedProps}
      width="100"
      height="100"
    >
      <circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
    </animated.svg>
  );
};

export default InteractiveSVG;

Источник:

#React
543
0
0
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Возможно вам понравится

В этом месте могла бы быть ваша реклама

Разместить рекламу
Генератор ЧПУ Библиотека переводов
Служба поддержки
support@dev-gang.ru