Jump to content

Recommended Posts

When exporting to SVG, is it possible to get HTML5 output without putting every property into styles?

 

Example:

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 300 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
  
  <rect x="78.614" y="8.716" width="220.68" height="14" style="fill:#e0e0e0;"/>
  
  <ellipse cx="28.992" cy="28.132" rx="24.492" ry="23.632" style="fill:none;stroke:#e0e0e0;stroke-width:9px;"/>
  
</svg>

According to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Core_attributes this can be written like this (looking only at the rect and ellipse):

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 300 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
  
  <rect x="78.614" y="8.716" width="220.68" height="14" fill="#e0e0e0"/>
  
  <ellipse cx="28.992" cy="28.132" rx="24.492" ry="23.632" fill="none" stroke="#e0e0e0" stroke-width="9px" />

</svg>

In my opinion this a more modern and cleaner way of writing SVG.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×