Как вставить треугольник иерархии в электронное письмо с помощью html

У меня есть веб-страница, которая автоматически отправляет электронное письмо на основе шаблона. В этом письме я хочу треугольник иерархии, который будет использовать некоторые данные со страницы. Страница генерирует результаты; Количество мероприятий, количество назначений, количество предложений, количество сделок. Таким образом, в письме он должен иметь вершине треугольника: число мероприятий (100) Второй уровень: количество назначений (30) Третий уровень: количество предложений (10) Дно: количество сделок (3)Как вставить треугольник иерархии в электронное письмо с помощью html

Смогу ли я использовать HTML? Или, возможно, использовать изображение и текст наложения?

источник

2016-02-10 Kirk

Одна из возможностей - вывести результат как .svg, а не стандартное изображение. SVG - это в основном XML, и большинство браузеров теперь могут сделать их безупречно. Они очень просты в создании и будут хорошо работать с чем-то простым, как описанное вами приложение.

Хорошее место, чтобы начать здесь:

http://www.w3schools.com/svg/

Вы можете увидеть некоторые большие примеры с кодом здесь:

http://www.w3schools.com/svg/svg_examples.asp

источник

2016-02-10 04:57:08 LuvnJesus

Проблема: «большинство _BROWSERS_ может выдавать [SVG] безупречно». Клиенты электронной почты НЕ являются браузерами – 4castle

Если вы посмотрите на [эту статью css-tricks.com] (https://css-tricks.com/a-guide-on-svg-support-in-email/), она объясняет, что Outlook 2013 , Gmail, Gmail (iOS) и Android не поддерживают SVG в тегах img (это 40% основных почтовых клиентов, и это scenerio, где SVG получает поддержку MOST на изображениях) (и в случае, если вам любопытно встроенные почтовые клиенты iOS и OSX являются единственными, у которых есть полная поддержка). Однако, если вы читаете в нижней части статьи, у них есть некоторые интересные обходные пути, которые заменяют файлы .jpg, когда они не поддерживаются. Назовите банку червей. – 4castle

А? https://css-tricks.com/a-guide-on-svg-support-in-email/ Здесь говорится, что все перечисленные мной службы поддерживают его, кроме GMAIL вне Android. Я не использую GMAIL, кроме как с моего телефона, поэтому на самом деле этого не ожидал. Моя офисная машина использует Office 365/Outlook. – LuvnJesus

Да, но не до такой же степени, как полный браузер. Клиенты электронной почты сильно различаются в поддержке HTML-тегов, поэтому используйте только базовые static HTML-теги, такие как div, span, a, или img. Для получения дополнительных возможностей вам нужно будет ссылаться на страницу, которая может показаться более динамичной.

Сказали, что можете сделать лот только с изображениями, divs, ссылками и текстом. Даже самые крупные компании с действительно высокоуровневыми разработчиками просто используют эти теги.

источник

2016-02-10 04:58:44 4castle

Правда. SVG - это src, используемый в теге img, поэтому я думаю, что мы будем хороши. Фактически, большая часть электронной почты, которую мы получаем со встроенными изображениями, - это SVG, и мы даже этого не понимаем. Но я должен согласиться, что для более старых почтовых клиентов SVG могут быть проблемой. Но для GMAIL, Yahoo Mail, Outlook и других обычных почтовых клиентов это должно быть хорошо. – LuvnJesus

@ LuvnJesus Правильно, но SVG - это не просто обычный тип файла изображения. Это XML. И довольно вероятно, что он будет отображаться как текст в вашем электронном письме, если он не поддерживается. Я думаю, что существует большой брак между нашими ответами, которые будут работать лучше всего, потому что вы хотите предоставить E-mail НЕКОТОРЫЕ возможности копировать/вставлять и т. Д. Но отправитель не должен бояться предоставлять ссылку на более причудливую веб-страницу, которая может дать им необходимую деловую информацию. Я понимаю, что это не рекламный адрес электронной почты, где люди могли бы пропустить ссылку. – 4castle

@LuvnJesus Итак, Yahoo Mail - единственный клиент, который вы только что указали, который поддерживает изображения SVG. – 4castle

Как вставить треугольник иерархии в электронное письмо с помощью html

ответ

Смежные вопросы