Change site style→

style-1 style-2
  1. nazenani
  2. >
  3. SVG
  4. >
  5. How to create and display SVG images? 

How to create and display SVG images? 

This article argue how to create nice SVG images.
\welcome to discuss it.

SVG has a weak point that gradation  sometimes don’t display normally, especially mesh gradation.

Transmitted images also can be a weak point.

How should we create SVG?

  1. Set art board size as you wish. When creating  image which has width 200 px and height 200 px, set art board size width 200 px and height 200 px.
  2. Draw image without mesh gradation. It’s also better not to use filters such as multiplication.
  3. Delete unnecessary layer and group.
  4. Write out it as SVG. Then set following options,

    • style:inline or internal CSS.
    • font: SVG.
    • images: keep or embedded
    • object ID:minimun
    • number of decimal:1-2
    • check reduction and responsive if youneed

These settigs reduce file size.

How to display SVG images?

This is how to display SVG image in WordPress.

  • add code below in .htaccess.
  • add code below in functions.php.

Then, SVG images can be used in WordPress.


Fields with * is required.

Go to related tags archive?