Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[DRY] Use SVG to embed the header and footer

Open
#36 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Refactor
Clarity
Mostly clear
Activity status
Stale
Tech stack
html
Domain
frontend, web-dev

Research direction

Start by reviewing the existing host HTML pages and the linked resources on scaling SVG, responsive SVG CSS, and HTML inside SVG. Confirm whether one SVG can define the shared header and footer and embed them across all pages; done means the common elements have a single definition and render with the required sizing.

Written by the indexing model from the issue text.

Description

page: footer page: header

This is the 4th (!!) attempt to fully implement the DRY principle by having the common elements (header and footer) defined in a single file and embedded in all other pages. The three previous attempts were html imports (#4), seamless iframes (#11), and intrinsic sizing (#32).

The first two are apparently out of the question, since in both cases, the spec authors seem adamant about not supporting the "seamless embedding of HTML content" use case. As of September 2017, the third one (specifically the height property) is still not widely supported, so I can't really use it yet.

However, it just occurred to me that I can can include HTML within an SVG file, and then embed the SVG within the host HTML page. If this works, it would not only be a working solution, but also give access to the rich sizing options SVG provides, with the viewBox and preserveAspectRatio attributes in addition to height and width. Could this finally be the solution??

Below are some links that will likely be useful for the implementation:

Dominant language
HTML
Stars
3
Forks
1
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from waldyrious/waldyrious.github.io

All issues in waldyrious/waldyrious.github.io

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.