starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Replace logo image with SVG #3098

New Issue
Closed
opened 2025-12-29 18:25:37 +01:00 by adam · 0 comments
adam commented 2025-12-29 18:25:37 +01:00
Owner
Copy Link

Originally created by @hSaria on GitHub (Dec 29, 2019).

Proposed Changes

Replace the existing netbox_logo.png with an SVG.

New:
image

It looks freakin' glorious at a larger size; check out README.md in the pull request.

Old:
image

Justification

  • Easier to maintain/change in the future
  • Scales to size
  • Simple (I only had to use circles and rectangles)
  • Smaller (50% of old)

I've created two variants, one with the title and one without it.

I couldn't tell which font is in the old logo so I used what most-closely matched it.

netbox_logo.svg 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 320">
  <style>
    .title {
      font-weight: bold;
      font-size: 200px;
      font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: 4px;
    }
  </style>
  <g fill="#9cc8f8" stroke="#9cc8f8">
    <circle cx="37" cy="284" r="23"/>
    <circle cx="101" cy="37" r="23"/>
    <circle cx="101" cy="220" r="23"/>
    <circle cx="284" cy="220" r="23"/>
    <rect x="93" y="37" width="16" height="180"/>
    <rect x="101" y="212" width="180" height="16"/>
    <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"/>
  </g>
  <g fill="#1685fc" stroke="#1685fc">
    <circle cx="284" cy="37" r="23"/>
    <circle cx="37" cy="101" r="23"/>
    <circle cx="220" cy="101" r="23"/>
    <circle cx="220" cy="284" r="23"/>
    <rect x="37" y="93" width="180" height="16"/>
    <rect x="212" y="101" width="16" height="180"/>
    <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"/>
    <text x="380" y="150" alignment-baseline="middle" class="title">netbox</text>
  </g>
</svg>
netbox_icon.svg 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
  <g fill="#9cc8f8" stroke="#9cc8f8">
    <circle cx="37" cy="284" r="23"/>
    <circle cx="101" cy="37" r="23"/>
    <circle cx="101" cy="220" r="23"/>
    <circle cx="284" cy="220" r="23"/>
    <rect x="93" y="37" width="16" height="180"/>
    <rect x="101" y="212" width="180" height="16"/>
    <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"/>
  </g>
  <g fill="#1685fc" stroke="#1685fc">
    <circle cx="284" cy="37" r="23"/>
    <circle cx="37" cy="101" r="23"/>
    <circle cx="220" cy="101" r="23"/>
    <circle cx="220" cy="284" r="23"/>
    <rect x="37" y="93" width="180" height="16"/>
    <rect x="212" y="101" width="16" height="180"/>
    <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"/>
  </g>
</svg>
Originally created by @hSaria on GitHub (Dec 29, 2019). ### Proposed Changes Replace the existing `netbox_logo.png` with an SVG. New: <img width="360" alt="image" src="https://user-images.githubusercontent.com/34197532/71557461-7fe0cf80-2a3e-11ea-8077-1780466df449.png"> > It looks freakin' **glorious** at a larger size; check out `README.md` in the pull request. Old: <img width="358" alt="image" src="https://user-images.githubusercontent.com/34197532/71557457-6e97c300-2a3e-11ea-9e2b-43663c600609.png"> ### Justification * Easier to maintain/change in the future * Scales to size * Simple (I only had to use circles and rectangles) * Smaller (50% of old) I've created two variants, [one](https://jsfiddle.net/mpor7k1z/) with the title and [one](https://jsfiddle.net/9v08pou6/) without it. > I couldn't tell which font is in the old logo so I used what most-closely matched it. <details> <summary>netbox_logo.svg </summary> ```html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 320"> <style> .title { font-weight: bold; font-size: 200px; font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 4px; } </style> <g fill="#9cc8f8" stroke="#9cc8f8"> <circle cx="37" cy="284" r="23"/> <circle cx="101" cy="37" r="23"/> <circle cx="101" cy="220" r="23"/> <circle cx="284" cy="220" r="23"/> <rect x="93" y="37" width="16" height="180"/> <rect x="101" y="212" width="180" height="16"/> <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"/> </g> <g fill="#1685fc" stroke="#1685fc"> <circle cx="284" cy="37" r="23"/> <circle cx="37" cy="101" r="23"/> <circle cx="220" cy="101" r="23"/> <circle cx="220" cy="284" r="23"/> <rect x="37" y="93" width="180" height="16"/> <rect x="212" y="101" width="16" height="180"/> <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"/> <text x="380" y="150" alignment-baseline="middle" class="title">netbox</text> </g> </svg> ``` </details> <details> <summary>netbox_icon.svg</summary> ```html <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"> <g fill="#9cc8f8" stroke="#9cc8f8"> <circle cx="37" cy="284" r="23"/> <circle cx="101" cy="37" r="23"/> <circle cx="101" cy="220" r="23"/> <circle cx="284" cy="220" r="23"/> <rect x="93" y="37" width="16" height="180"/> <rect x="101" y="212" width="180" height="16"/> <rect x="93" y="212" width="16" height="90" transform="rotate(45 101 220)"/> </g> <g fill="#1685fc" stroke="#1685fc"> <circle cx="284" cy="37" r="23"/> <circle cx="37" cy="101" r="23"/> <circle cx="220" cy="101" r="23"/> <circle cx="220" cy="284" r="23"/> <rect x="37" y="93" width="180" height="16"/> <rect x="212" y="101" width="16" height="180"/> <rect x="212" y="93" width="16" height="90" transform="rotate(225 220 101)"/> </g> </svg> ``` </details>
adam added the status: accepted label 2025-12-29 18:25:37 +01:00
adam closed this issue 2025-12-29 18:25:37 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#3098
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?