What are the best Illustrator settings for exporting SVGs for the web?

Seeking to implement a responsive SVG logo on a website that looks great across all devices is my current goal.

Considering the issues surrounding SVG usage, I aim to ensure broad device and browser support while also prioritizing loading speed. How do Adobe Illustrator's export settings factor into this equation?

When it comes to exporting SVGs in Illustrator, the choice of SVG profile is crucial. Which SVG profile would be most ideal?

Is SVG Tiny preferable due to its smaller file size? How widespread is the support for SVG Tiny among devices? What are the key differences to consider? (Without delving into this extensive W3 document.)

Also, should the "link" option be chosen as the image location for optimal performance? (Details following the exclamation mark.)

Alternatively, how reliable is browser support for the "embed" option?

Thank you!

P.S. While there will be a fallback alpha-PNG solution in place, my priority is to have strong support for the SVG format. (Perhaps considering a fallback like a JPG may be more feasible in this scenario, especially since addressing compatibility issues with older versions of IE can be complex when using alpha-PNG.)

Update: There are additional configurations available. Since text is not a concern for me, the relevant setting seems to be decimal places. For logos meant to display at a maximum of 200x200px (or 400x400px on Retina screens), would a value of "3" be optimal, or should I choose "2" to minimize the file size?

Answer №1

https://i.sstatic.net/ETM0o.png

SVG Profiles

  • When it comes to SVG profiles, avoid using SVG 1.0 as all modern desktop and mobile browsers support SVG 1.1. Therefore, the best choice is usually SVG 1.1.
  • Fonts: The font settings in SVG files matter only when text is included.

Note: Understanding SVG settings can significantly impact file size and compatibility across different devices.

Erik Dahlström provides insight on how different viewers handle various SVG content rendering options. It's crucial to select the appropriate settings based on your specific needs.


For optimal results, pay attention to details like subsetting fonts, embedding images, and preserving editing capabilities from Illustrator. These considerations play a vital role in creating efficient and versatile SVG files that meet your design requirements.

Choosing the right settings for encoding, decimal places, metadata inclusion, and responsiveness can streamline the SVG creation process and enhance the overall user experience.

To sum up, familiarize yourself with SVG basics and explore its potential beyond traditional graphic formats. With proper settings and understanding of SVG nuances, you can unlock new possibilities for engaging and dynamic visual content.

Answer №2

Adding on to the insightful explanation from @methodofaction.

It's worth noting that there have been some updates to the export options in the most recent version of Illustrator.

  1. Gone is the Adobe SVG Viewer, a feature of the past.

  2. Of greater importance is the new "responsive" setting, which comes enabled by default. This setting removes the height and width properties from your svg root node, assuming you will adjust the size using css. However, there are cases where you may want each graphic to specify its own dimensions. In such scenarios, remember to disable this setting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expand Tooltip on the Fly

Is there a way to make a tooltip expand horizontally instead of overflowing below the page? I have a tooltip that can be quite lengthy, and due to its max-width being set at 200px, it extends beyond the bottom edge of the page. I am currently able to set ...

Adding two BR tags between inline images within a wrapper is causing inconsistencies in spacing when viewed in Firefox compared to all other browsers. Check out an example of this issue in

JS Fiddle Link http://jsfiddle.net/Xfvpu/1/ Having a perplexing issue with image rendering in Firefox compared to other browsers. The xhtml doctype is used with proper br / tag spacing, but the gap between two images on this specific document displays dif ...

Is the progress bar able to duplicate itself?

I'm currently facing an issue with my progress bar, or as I like to call it, a depletion bar. The purpose of this bar is simple - whenever it's clicked, the button resets itself. However, if the bar reaches 100%, the player loses. The strange pro ...

Can the typical drag and drop cursors be ignored in an HTML drag operation?

I've been working with the HTML drag and drop API to allow users to resize columns in a table. However, I've noticed that when a user starts dragging a column, the cursor changes to one of the default drag and drop effects (such as move or none). ...

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

How to show PHP/HTML code within the PHP script and display it in HTML

Struggling to incorporate the following code into a PHP block for reuse on other webpages due to numerous errors. Any guidance on how to make this work? Here's the code block within a PHP file: <select name="products"> ...

Is it possible to refresh a table that is currently displayed in a model popup?

My code to reload a table or div inside a model popup continuously is not working as expected. Can you help me with this issue? I attempted to utilize ajax for this purpose but unfortunately, the code below is not updating chats (I am working on a chat ta ...

Is there a way to retrieve text from within a div using code behind in asp.net with c#?

I am currently developing a SQL QUERY editor where users can enter queries. The entered text is then passed to a SQL COMMAND for execution, and the results are displayed to the user in a GRIDVIEW. However, I am facing an issue in retrieving the text entere ...

Unusual glitch with paint/rendering in Safari while navigating through a lengthy list of content

Encountering a peculiar problem where a page displaying a grid of boxes is experiencing issues in Safari, Chrome on iPhone 11 Pro, iPhone 13 Pro, and Chrome on Pixel 4a. Other devices are not affected. Symptoms include unresponsiveness and blank sections a ...

How to prevent text from extending beyond the maximum width limit set in HTML

I defined a max-width of 500px for the div element, but the text inside is overflowing the width instead of wrapping to the next line. Can someone please assist with which code needs to be modified? Here is the code snippet in question: The div is set t ...

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

Using a PHP switch case statement with an HTML multiple select dropdown

I am facing an issue with my HTML multiple select box: <option value="1">First choice</option> <option value="2">Second choice</option> <option value="3">Third choice</option> Using jQuery, ...

I relocated the navigation HTML code to a new file and as a result, the JavaScript functionality is

After successfully implementing the hamburger icon animation in my navbar using JavaScript, I decided to move the nav code to a separate file for better organization. However, the decision resulted in an error where clicking on the burger icon returned a m ...

Ways to incorporate padding into md-card using Angular 2 material

Need assistance with adding padding to md-card in angular2 material. I am using md-card to display my product list but struggling to add padding on them. Here's what I have tried: product.component.html : <p> Product List </p> <div ...

Expanding elements with Flexbox and Bootstrap 4: Strengthening the height to fill the remaining space

I have a row with three columns, each containing an image and a title. Currently, on a large screen, the titles are displayed on a single line and everything looks fine. However, when resizing the screen, the first title wraps onto two lines: My goal is ...

Troubleshooting: .NET 6 compatibility issue with Bootstrap theme - tips for resolving

NOTE 2: Watch out for the visual studio IDE auto-filling the CSS initialization, as my issue was resolved in the comment section of the question NOTE: I have confirmed that I have the most recent bootstrap package installed from the manager matching the t ...

Incorporating a Bootstrap input group within a <td> element of a table

Encountering an issue when attempting to include a bootstrap input-group-addon with the input field nested inside a <td> tag within a table. Once all necessary classes are applied, there appears to be some spacing between the sign and the input field ...

Tips for merging two JavaScript/jQuery functions within a custom WordPress plugin

As I dive into the world of JavaScript and jQuery, I admit that I am still a beginner. Currently, I have set up a donation form on WordPress using a plugin that includes an html list. The first three options are fixed amounts (5 euro, 10 euro, 15 euro), w ...

Elements that do not change when hovered over and that intersect

In the provided example, I am attempting to decrease the opacity of non-hover elements on an HTML page. The code snippet below successfully reduces the opacity of non-overlapping elements. However, when there is a background element that overlaps and shou ...

How can I prevent list items in jQuery Mobile from being truncated with ellipses?

Here is the list I am working with: <ul id="linksList" data-role="listview" data-inset="true" data-filter="true"> <!-- Dynamic contents! --> </ul> This list pulls its data from a local XML file (RSS feed). I am looking f ...