Кодинг
★ Рубрика: Кодинг
★ Тема: графика, MathJax, SVG

LaTex формулы MathJax в SVG рисунках

Если у вас сайт математической направленности, то Вы используете на сайте формулы. Например, отображаете их с помощью MathJax. Но, вам может понадобиться и графика, причем векторная, а не растровая.
\(\displaystyle{O}\)
\(\displaystyle{S=\pi\times r^{2}}\)
Более того, может возникнуть необходимость прямо в графическое изображение внедрить формулу. Например, подписать какой-то элемент на картинке или для наглядности разместить формулу площади прямо на этой площади. Например так, как показано на рисунке слева. Изображение здесь создано в формате svg, а формула и надпись на рисунке отображаются в формате LaTeX. Набрать такую формулу можно с помощью нашего редактора формул (см. кнопку вверху публикации). Можно, конечно, сделать такую же картинку в любом графическом редакторе. Но, наше изображение можно менять прямо на странице и формулы тоже. Например, можно сделать анимацию. Более того, векторное изображение не меняет своего качества при масштабировании. Надписи и размеры его можно менять динамически с помощью скрипта. Преимуществ множество. Например, к изображению можно применить фильтр и выполнить преобразование изображения.
\(\displaystyle{O}\)
\(\displaystyle{S=\pi\times r^{2}}\)
Смотрите пример применения фильтра на картинке справа. На картинке справа, изменился размер окружности, и поэтому была перемещена надпись. И все это делается простым изменением координат для вывода формулы на картинке. В отличие от растровой графики, векторная графика позволяет рисовать изображение по формулам, что идеально для математического сайта. SVG-графика продолжает набирать популярности. У нее есть серьезное преимущество - нарисовать svg-картинку можно в обычном SVG-редакторе, а затем код картинки вставить в html-страницу и уже с ним проводить необходимые манипуляции. Например, вставлять в картинку формулы. Покажем теперь, как мы получили эти изображения с формулами. Для начала, вам понадобится подключить библиотеку MathJax с соответствующими параметрами (конфигурацией) для svg-графики. Код, приведенный ниже, можно разместить до кода изображения или после него.
А дальше разместим на странице код, отвечающий за создание окружности и внедрение внешних объектов в svg-картинку, а также код формул, которые будут внедрены:
Теперь о недостатках. Возможно, если у вас медленный интернет, то вы увидите как формируется формула на картинке.
 Похожие публикации: графика, MathJax, SVG

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]