Векторная (SVG) графика в webserver без SD карты

[НовыйUser]

Информация об возможности работы с векторной (svg) графикой в webserver без использования sd карты и внешних ссылок на графику.
На ее основе отлично работает графики прям в html.
Когда основная задача исключить отказ (SD) или когда ее нет или когда требуется легкая графика или разовые графики замеров.

Однако, основная речь о том что векторную ГРАФИКУ не возможно использовать в HTML пока в html коде двойные кавычки введенные пользователем находятся. При нахождения двойных при переходе в компиляцию от программы в IDE дописываются дополнительные в результате чего графика не выводится на экран.

Решение пока не исправлено единственное. Допускается замена всех двойных что используются на одинарные. В таком случае не происходит распознание и добавление лишних. Замена " на ' проста и не требует корректировок в последующих перекомпиляциях.

Однако,одинарные - редкость. При невозможности корректировки, возможно, имеет смысл добавить информацию в help блока. Кроме этого, код увеличивается за счет совершенно лишних символов (вместо "" создается """" ) это первый момент. Второй - разные средства отображения кода могут вполне трактовать по разному такой код. В данном случае при нахождение лишних графика отключается.

Полный текст:
[spoiler]Первое что понадобиться, помнить о том пока к символу дописывается лишний, графика svg в html не выводится.
Для этого используем следующее решение. В коду HTML все двойные кавычки меняются на одинарные.
По правилу они допустимы как альтернатива двойным.

Рассмотрим простой вариант:

<svg height='200' width='300'>
<polyline points='0graph 1graph 2graph 3graph 4graph 5graph 6graph 7graph' style='fill:none;stroke:blue;stroke-width:1' transform='scale(2, -2) translate(0, -100)'/>
</svg>

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

Построение графика с нулевой точки:

0graph заменяется уже в работе по входу на параметр 0,39

1graph заменяется уже в работе по входу на параметр 5,40

2graph заменяется уже в работе по входу на параметр 10,10

3graph заменяется уже в работе по входу на параметр 15,5

что есть 0,39 - это положение точки по горизонтали на 0 пикселей и высоту 39 пикселей

5,40 – это положение следующей точки на 5 киселей вправо относительно начала координат и высоту 40 (когда построена вторая точка формируется линия, будем ее пускать вниз задав 3 точку)
10,10 – это положение точки на 10 пикселей правее относительно начала и на высоту 10 пикселей, таким образом линия уходит вниз. 15,5 — продолжение линии….

Необходимо помнить что на отображении точки передается параметр через запятую.
При необходимости (но не будет заметным обычно) во второй параметр точки графика дополнительно возможно через точку добавить уточнение. К примеру 0,39.50

Указание настроек графика и закрытию тегом svg:

style='fill:none;stroke:blue;stroke-width:1' transform='scale(2, -2) translate(0, -100)'/>
</svg>

Заполнение fill— отсутствует,

stroke:blue– график рисовать синими линиями (допустимы разные цвета)

stroke-width:1 — ширина линий

transform — каким образом можно изменить отображение графика. Обычно трансформацию не используют, но в данном примере используется для увеличения резкости отображения линии на малом поле графика по средствам scale и зеркальном отображении графика параметром translate. При отсутствии параметра translate(0, -100) график будет отображаться непривычно. Точки с меньшими значениями станут вершинными. Именно для приведения графика к читаемому виду служит параметр 0, -100

Scale при параметрах 2, -2 действует на отображение графика подобно линзе. Стандартные параметры обычно единицами указаны.

Для детального изучения темы используйте в поисковике слова: svg polyline

(В тексте могут быть неточности. Прошло много времени)[/spoiler]

Графический пример:

график.jpg

Простейший не оптимизированный проектный пример (график атмосферного давления в мелком поле для экрана смартфона) демонстрирующий суть работы заполнение графика по точкам в промежутке 1 часа на протяжении 30 часов с обнулением и построением графика с нуля. Для работы графика без очистки поля по заполнению необходимо чуть изменить логику соответственно.

простой пример svg.flp