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

Если у вас сайт математической направленности, то Вы используете на сайте формулы. Например, отображаете их с помощью MathJax. Но, вам может понадобиться и графика, причем векторная, а не растровая. Более того, может возникнуть необходимость прямо в графическое изображение внедрить формулу. Например, подписать какой-то элемент на картинке или для наглядности разместить формулу площади прямо на этой площади. Например так, как показано на рисунке слева. Изображение здесь создано в формате svg, а формула и надпись на рисунке отображаются в формате LaTeX. Набрать такую формулу можно с помощью нашего редактора формул (см. кнопку вверху публикации). Можно, конечно, сделать такую же картинку в любом графическом редакторе. Но, наше изображение можно менять прямо на странице и формулы тоже. Например, можно сделать анимацию. Более того, векторное изображение не меняет своего качества при масштабировании. Надписи и размеры его можно менять динамически с помощью скрипта. Преимуществ множество. Например, к изображению можно применить фильтр и выполнить преобразование изображения. Смотрите пример применения фильтра на картинке справа. На картинке справа, изменился размер окружности, и поэтому была перемещена надпись. И все это делается простым изменением координат для вывода формулы на картинке. В отличие от растровой графики, векторная графика позволяет рисовать изображение по формулам, что идеально для математического сайта. SVG-графика продолжает набирать популярности. У нее есть серьезное преимущество - нарисовать svg-картинку можно в обычном SVG-редакторе, а затем код картинки вставить в html-страницу и уже с ним проводить необходимые манипуляции. Например, вставлять в картинку формулы. Покажем теперь, как мы получили эти изображения с формулами. Для начала, вам понадобится подключить библиотеку MathJax с соответствующими параметрами (конфигурацией) для svg-графики. Код, приведенный ниже, можно разместить до кода изображения или после него.
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script> А дальше разместим на странице код, отвечающий за создание окружности и внедрение внешних объектов в svg-картинку, а также код формул, которые будут внедрены:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> <circle cx="100" cy="100" r="99" fill="yellow" stroke="red" /> <circle cx="100" cy="100" r="3" fill="blue" /> <foreignObject x="100" y="100" width="100" height="100"> <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Times; font-size:15px"> \(\displaystyle{O}\) </div> </foreignObject> <foreignObject x="60" y="50" width="100" height="100"> <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Times; font-size:15px"> \(\displaystyle{S=\pi\times r^{2}}\) </div> </foreignObject> </svg> Теперь о недостатках. Возможно, если у вас медленный интернет, то вы увидите как формируется формула на картинке.