Skip to main
Table of Contents

SVG File Include

This example demonstrates Synticore's HTML include flow with gulp-file-include by inlining an SVG file directly into the page.

In index.html, the project uses: @@include('asset/include/content/icon/globe.svg'). The same pattern is shown below.

Live Output

This is the compiled result of including asset/include/content/icon/globe.svg:

How It Works

The @@include directive copies the SVG file content into your HTML during build. Because the SVG markup becomes inline HTML, you can target it with CSS, animate it, and avoid an extra HTTP image request.

Include Directive 

@@include('asset/include/content/icon/globe.svg')

Practical Notes

  • Use this for reusable icons or illustrations that benefit from CSS control.
  • If an SVG has hardcoded size attributes (like this globe), CSS can still override display size.
  • Keep SVG sources organized under in/asset/include/ for predictable include paths.