I want to create links to jump across an SVG. So I placed some ID's on the objects in the SVG I want to jump to and added some A tag elements linking to those ID's. This works when the SVG is inline, but when I use the Object tag to load the SVG it doesn't work. This makes sense because the object tag loads the SVG as a separate document in the main document.
Some code describing the scenario:
[some-html]
<object type="image/svg+xml" data="/somesvg.svg"></object>
[more-html]
Jump to #id-somewhere-in-the-svg
And some in the SVG:
<a id="id-somewhere-in-the-svg" xlink:href="...">
<g id="some-id">
<path d=...
For now, I solved the problem using Javascript, but I would like to know if there's a pure HTML solution.
I am writing a mail class in Laravel that show a svg file from url inside an imp tag. When the email is sent the svg file is replaced with a blue question mark and is not showing the alt text. But when I view the blade as a web page it is working fine.
Here is the code for the svg file:
<a href="{{ $url }}">
<img alt="SVG" height="36" src='https://exmaple.com/someFile.svg' width="127">
</a>
Thanks in advance
Many email clients don't support SVG. Unfortunately, email clients don't update like browsers.
You can follow this link for the guidelines about using SVG in mail.
http://stylecampaign.com/blog/2014/01/basics-of-svg-in-email/
I have sent email using my html template.But when i send this email to Gmail / Yahoo then image not showing When i check inspect email body elements, infront of image some other tags are added.
I have added jpg / png images.result is same
My Html template
<table>
<tbody>
<tr>
<img src="https://svgshare.com/i/DqF.svg" alt="" style="width:200px;height:200px;" />
</tr>
</tbody>
</table>
Inspected Gmail Body
<img src="https://ci6.googleusercontent.com/proxy/qX7T2O0am5PVOmfbHSLTZLdjuN0J3o0kiJi1YLNNf3vBGQe9j0YtQrA9aw4wyZWcbg=s0-d-e1-ft#https://svgshare.com/i/DqF.svg" alt="" style="width:200px;height:200px" class="CToWUd">
svg files are not supported by all email clients, Gmail is one of them. Yahoo I don't know. You should convert the svg file to png of jpg with any of the following tools:
https://www.google.com/search?q=svg+to+png+converter+online
Gmail and Yahoo don't support svg as far as I know.
You can look at this question from a few years ago that might help:
Is there a trick to display svg images in gmail?
I am having problem with an email template. I am setting the URL without any scheme, so kept it relative. In html source code it's forming as below. But when I checked the browser it's trying to get the image with file
protocol. So it's not loading the image at all. I can add the scheme while forming the URL at back end but I want to avoid this. Not sure if it's related to doc type, i am using HTML 5. With http url image is accessible.
!DOCTYPE
html
HTML Code:
<img src="//domain.test.com/XXX/XXX/YYY.jsp?type=Interleaved2Of5&msg=911000016096553&fmt=image/jpeg&height=33&res=48&mw=.7&gray=true&wf=2.5&hrp=bottom&hrsize=20pt&hrfont=verdana" width="146" height="62" style="display: block; margin:0; padding: 0"/>
On Browser:
file://domain.test.com/XXX/XXX/YYY.jsp??type=Inte…ght=33&res=48&mw=.7&gray=true&wf=2.5&hr.....
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?
I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
This is the correct way to do it for a html email:
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
This is how you should be able to do it
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way
*update
you can do it like this
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
You need to be as archaic as possible to make HTML emails work across all clients.
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
If in doubt consult the oracle, I always do :)
Source: https://www.campaignmonitor.com/css/b/
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
First, here is the HTML code we will be working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code
in a browser, you’ll need to have it saved as an HTML document. You can
accomplish this by copying and pasting the code above into a code editor or text
editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the
extension “.html”.
If you are using TextEdit on a MAC, you will need to switch to plain text editing
before pasting the code. To do this, choose “Make Plain Text” from the “Format”
menu.
For this example, we will assume your file name is “image_resizer.html”. If you
need to change the image, you will need to edit the HTML document with a code
or text editor. To do this, right click the HTML document and choose “Open With”
and select a code editor or text editor. Then, swap out the image source path
(bolded in the example above), replacing it with the path that points to the
updated image. Then save, and your HTML file should ready to go and updated
to point to the new image.
If you are using TextEdit on a MAC, you will need to start a new document,
switch to plain text editing, paste the code again, and then change the path to the
image.
Step 1: Open image_resizer.html in a browser. To do this, double click it OR
right click it and select a browser from the “Open With” menu.
Step 2: Click anywhere on the webpage. You can click on the image itself or the
white space on the webpage. The idea here is to make sure that we will have
the pointer’s focus on the window to verify that the page is ready to be selected.
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A”
on a MAC. The page contents will be highlighted.
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on
a MAC. The page contents will be copied to the clipboard. (That just means that
the computer memorizes it).
Step 5: Now that the contents are copied to the clipboard (memorized by the
computer), open your Gmail and click the compose button. Place your curser in
the content area (click in the area where you type a message).
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on
a MAC.
Step 7. Finish typing your email message and send it.
I was dealing with really big images without any kind of a container. I fixed it by using max-width to ensure the image wouldn't be too big.
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vw and not 100 because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.